当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS 垂直居中

CSS 垂直居中

2018年10月18日  | 移动技术网IT编程  | 我要评论
 
方法一：外层给： 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;

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网