智鼎互联网站建设,原平新闻热点头条,高端网站建设口碑,为什么建设的网站有时候访问慢6文章目录 写在前面涉及知识点1、子绝对定位父相对定位#xff0c;子节点设置位移实现1.1效果1.2实现源码 2、子绝对定位父相对定位#xff0c;子节点设置上下边距2.1 效果2.2 实现源码 3、利用flex布局实现3.1 效果3.2 实现源码 4、利用行高和文本水平居中设置4.1 效果4.2 实… 文章目录 写在前面涉及知识点1、子绝对定位父相对定位子节点设置位移实现1.1效果1.2实现源码 2、子绝对定位父相对定位子节点设置上下边距2.1 效果2.2 实现源码 3、利用flex布局实现3.1 效果3.2 实现源码 4、利用行高和文本水平居中设置4.1 效果4.2 实现源码 5、子绝对定位父相对定位设置外边距margin实现5.1 效果5.2 实现源码 6、源码分享6.1 百度网盘6.2 123网盘6.3 邮箱留言 总结 写在前面
这个题目估计是所有面试的人都遇到过的我也是6年没有挪过窝了那时候一天去面试5/6家公司当时真的是面对各种面试官的“毒打”当然现在回想起来还是觉得很有意思那么今天我就重点和大家说一下CSS子元素如何实现水平垂直居中5种方法。
涉及知识点
CSS水平垂直居中的五种方法手把手教你如何实现水平垂直居中布局水平居中垂直居中子容器如何水平垂直居中flex布局实现垂直水平居中相对绝对定位实现水平垂直居中。 版权声明此文原创于CSDN博主-《拄杖盲学轻声码》主页有很多分享的代码期待您的访问。
其实以下5种CSS水平垂直居中主要的实现方式。
1、子绝对定位父相对定位子节点设置位移实现
首先我们创建父子两个dom节点然后给父节点设置相对定位给子节点设置绝对定位然后再设置top和left均为50%然后再设置位移transform属性左右-50%。 效果如下
1.1效果
如下棕灰色部分为父节点蓝色部分为子节点
1.2实现源码
html源码
div classpartdomdiv classfather father1父节点1div classson1子节点1/div/div
/divCss源码
.father {width: 100%;height: 100%;color: red;background-color: #dbd2ce;
}.father1 {position: relative;
}.son1 {position: absolute;width: 60px;height: 60px;background-color: #66ddee;top: 50%;left: 50%;transform: translate(-50%, -50%);
}2、子绝对定位父相对定位子节点设置上下边距
其实这个和第一种方式是类似的但是我们要知道的是相对定位对应的是盒子的开始位置也就是左上角的位置所以设置了50%之后我们得把本身的偏移量算上去才能完全水平垂直居中如下所示效果与源码。
2.1 效果
实现效果如下所示
2.2 实现源码
html源码
div classpartdomdiv classfather father2父节点2div classson2子节点2/div/div
/divCss源码
.father2 {position: relative;
}.son2 {position: absolute;width: 60px;height: 60px;background-color: #dd1122;top: 50%;left: 50%;margin-left: -30px;margin-top: -30px;color: #fff;
}版权声明此文原创于CSDN博主-《拄杖盲学轻声码》主页有很多分享的代码期待您的访问。
3、利用flex布局实现
其实这个主要是设置父节点为flex布局方式然后通过设置justify-content属性和align-items属性来进行设置的具体效果和代码如下。
3.1 效果
实现效果如下
3.2 实现源码
html源码
div classpartdomdiv classfather father3div classson3子节点3/div/div
/divCss源码
.father3 {display: flex;justify-content: center;align-items: center;
}.son3 {width: 60px;height: 60px;background-color: #00a;color: #fff;
}4、利用行高和文本水平居中设置
我们都知道设置文本的一些常用属性尤其是设置文本居中我们用text-align:center设置文本垂直居中我们会设置line-height设置50%等方式那么今天我要说的是利用这两个属性实现dom节点水平垂直居中。 首先我们要设置子节点为行内块显示模式由于对齐属性用的是文本的所以我们要针对子节点设置vertical-align:middle属性具体实现效果及代码如下所示。
4.1 效果 4.2 实现源码
html源码
div classpartdomdiv classfather father4div classson4子节点4/div/div
/divCss源码
.father4 {text-align: center;line-height: 200px;
}.son4 {display: inline-block;width: 60px;height: 60px;line-height: 30px;color: #fff;background-color: #66f;vertical-align: middle;
}5、子绝对定位父相对定位设置外边距margin实现
其实我们知道前面第一二种的人很多这个方式的反而很少设置完子绝对和父相对只要把上下左右偏移设置为零margin设置为自动即可其中效果与源码如下所示。
5.1 效果 5.2 实现源码
html源码
div classpartdomdiv classfather father5div classson5子节点5/div/div
/divCss源码
.father5 {position: relative;
}.son5 {position: absolute;width: 60px;height: 60px;background-color: #66ddee;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}其实我这个在一开始接触前端的时候就经常遇到这个问题尤其是面试时候十之八九有这个询问也是初级web开发必要掌握的东西整体5个实现效果如下我做了一个整理
6、源码分享
6.1 百度网盘
链接https://pan.baidu.com/s/11Z6gCTosQhTfqCFfjhhR-Q 提取码hdd6
6.2 123网盘
链接https://www.123pan.com/s/ZxkUVv-7BI4.html 提取码hdd6
6.3 邮箱留言
评论区留下您的邮箱账号博主看到第一时间发给您祝您生活愉快 总结
以上就是今天要讲的内容本文主要介绍了CSS水平垂直居中的五种方法手把手教你如何实现水平垂直居中布局水平居中垂直居中子容器如何水平垂直居中flex布局实现垂直水平居中相对绝对定位实现水平垂直居中也期待大家一起进步哈2023年一起加油
版权声明此文原创于CSDN博主-《拄杖盲学轻声码》主页有很多分享的代码期待您的访问。
