水平垂直居中css4种方法,Css水平垂直居中

作为一名前端小童鞋，入行最开始就会碰到这样子的问题，兼容性也是大家考虑的重点之一，今天就来写一篇垂直水平居中的几种方法。话不多说，直接开干…

1. table-cell

HTML部分

<div class="box"> <div class="content">垂直居中的块</div></div>

CSS

.box{ display: table-cell; vertical-align: middle; text-align: center;}

效果

2. 使用absolute去实现 ( 在这里我们content的高度，主要去靠里边内容去撑就可以了)*

HTML部分

<div class="box"> <div class="content">垂直居中的块</div></div> .box { position: relative; width: 100%; height: 400px;}.content { width: 100%; max-width: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}或者 (* 注意: 各个定位的值不一定为0).content { width: 100%; max-width: 600px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto;}

效果

3. flex布局

<div class="box"> <div class="content">垂直居中的块</div></div> .box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center;}

效果

display:inline-block (*在这里我们通过:after来占位，其实这种方式很多地方都可以用到，后续会提到巧妙运用after的情况) <div class="box"> <div class="content">垂直居中的块</div></div> .box { font-size: 0; // 是为了去除display: inline-block带来的间隙影响 height: 400px;}.box:after { content:''; width: 0; height: 100%; display: inline-block; vertical-align: middle;}.content { vertical-align: middle; display: inline-block; font-size: 16px; // 字号一定要加，不然内部字号都为0}

效果

本人并不喜欢去把「需要居中的块级元素」宽写死，有时候可能需要考虑响应式的问题…
今天就到这里啦。新童鞋学会了吗？阿巴阿巴…