元素垂直居中

📅 发布时间：2026/7/28 16:36:19 👁 浏览次数：

元素垂直居中

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%); }