CSS实现垂直居中(八种) |
您所在的位置:网站首页 › 网页制作怎么居中 › CSS实现垂直居中(八种) |
1. 使用line-height实现垂直居中
适合文本使用,子元素的line-height跟父元素的height一样即可 1.1 代码 .div1 { width: 400px; height: 100px; background-color: blue; } p { line-height: 100px; } 使用line-height实现垂直居中 1.2效果图 2. 使用relative相对定位居中子元素使用相对定位 position: relative;top: 40%;,这个40%是这么来的呢?因为相对定位是根据元素的头去定位的。计算方式:(容器高度-元素自身高度)/2。(不建议使用) 2.1 代码 .div2 { width: 400px; height: 100px; background-color: green; } .div2>p { position: relative; top: 40%; } relative相对定位居中 2.2 效果图 3. 使用absolute绝对定位居中第三种方式跟第二种的差不多,不同的是这次使用了top: 50%; ,然后使用负值的margin解决定位差距,margin-top: -10.5px;为子元素自身高度的一半.最后注意子元素使用position: absolute;绝对布局时,要先设置父元素的position: relative为相对定位。(不建议使用,需要自己计算子元素的高度) 3.1 代码 } .div3 { width: 400px; height: 100px; background-color: yellow; position: relative; } .div3 > p { position: absolute; top: 50%; margin-top: -10.5px; } relative相对定位居中 3.2 效果图 4. absolute+margin实现垂直居中利用绝对定位top: 0;left: 0;bottom: 0;right: 0;这样子元素元素就会充满整个容器,这时候使用margin: auto 0;就能使元素居中啦。这个记得给这个元素设定高度哦。 4.1代码 .div4 { width: 400px; height: 100px; background-color: plum; position: relative; } .div4 > p { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto 0; height: 21px; } absolute+margin实现垂直居中4.2 效果图 5. 使用table-cell实现垂直居中第五种没什么好解释的,记住这两句代码就完事了display: table-cell;vertical-align: middle; 5.1 代码 .div5 { width: 400px; height: 100px; background-color: pink; display: table-cell; vertical-align: middle; } .div5 > p { /* nothing to do */ } table-cell实现垂直居中 5.2 效果图 6. flex实现垂直居中(1)第六种挺简单的,父元素设置display: flex;,然后子元素使用margin:auto 0;就可以实现居中了。 6.1 代码 .div6 { width: 400px; height: 100px; background-color: cadetblue; display: flex; } .div6 > p { margin: auto 0; } flex实现垂直居中(1) 6.2 效果图 7. flex实现垂直居中(2)同样是父元素设置display: flex;,这次子元素使用align-self: center;就可以实现居中了。 7.1 代码 .div7 { width: 400px; height: 100px; background-color: darkcyan; display: flex; } .div7 > p { align-self: center; } flex实现垂直居中(2) 7.2 效果图 8. flex实现垂直居中(3)这次父元素直接使用display: flex; +align-items: center;直接控制子元素垂直居中 8.3 代码 .div8 { width: 400px; height: 100px; background-color: darkcyan; display: flex; } .div8 > p { /* nothing to do */ } flex实现垂直居中(2) 8.2 效果图css实现垂直居中的方法还有很多很多,我一般都是使用第八种,你们呢?欢迎在评论区留言(^U^)ノ~YO |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |