首页 > > 网页制作 > css >

CSS 垂直居中

2018-10-19 06:13:19来源：博客园阅读 ()

方法一：外层给： display: table ---区别：子元素的 width=100%;

内层给： display: table-cell; vertical-align: middle; text-align: center; // 内容居中也是可以实现的。

方法二：外层不论是 position: absolute;// position: relative; 对子内容没有影响 ---区别：子元素的宽高= 50%；

内层给： position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)---transform:translate(x,y)

方法三：只需要给父级元素 display: flex; justify-content: center; align-items: center; flex 容器，对项目设置水平和垂直居中

---区别：效果等同于 table-cell 项目的 width = 100%;

方法三：需要给父元素增加 :after 来占位

父元素： text-align: center;

子元素： display: inline-block; vertical-align: middle;

父元素 : after content:''; width:0; height: 100%; display: inline-block; vertical-align: middle;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

热门词条

最新资讯

热门关注

热门标签