生活随笔
收集整理的这篇文章主要介绍了
元素垂直居中
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
1、表格实现
父级{
display:
table;}
子级{
display:
table-cell;
vertical-align:
middle;}
display:table- cell属性类似于td标签。会受一些css属性破坏：float,position:absolute;display与这些样式同用会失去效果。而且table-cell对margin无反应。
2、inline-block设置垂直居中
<style> html,body{height:100%;} .wrapper{height:100%;}/* 在content容器之前构造一个空内容的inline-block，让空内容行内上下对齐 */ .wrapper:before{content:"";display:inline-block;height:100%;vertical-align: middle;} .content{width:98%;display:inline-block;vertical-align: middle;}
</style>
<div class="wrapper"><div class="content">content</div>
</div>
3、flex布局实现居中
{
display:
flex;
justify-content:
center;
/* 水平居中 */align-items:
center;
/* 垂直居中 */
}
4、居中定位
.center {
position:
absolute;
top:
50%;
left:
50%;
width:
50%;
height:
50%;
-webkit-transform:
translateX(-50%) translateY(-50%);
-moz-transform:
translateX(-50%) translateY(-50%);
-ms-transform:
translateX(-50%) translateY(-50%);
transform:
translateX(-50%) translateY(-50%);
}
总结
以上是生活随笔为你收集整理的元素垂直居中的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
