CSS 垂直居中的七种方法，值得收藏( 二 ) _CSS

HTML：
<table> <tr> <td> <div>表格垂直居中</div> </td> </tr></table><div class="like-table"> <div>假的表格垂直居中</div></div>CSS：
.like-table{ display:table-cell;}td,.like-table{ width:150px; height:100px; border:1px solid #000; vertical-align: middle;}td div,.like-table div{ width:100px; height:50px; margin:0 auto; color:#fff; font-size:12px; line-height: 50px; text-align: center; background:#c00;}.like-table div{ background:#069;}

文章插图

5、transformtransform是CSS3的新属性，主要用于元素的变形、旋转和位移，利用transform里头的translateY (改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准)，搭配元素本身的top属性，就可以做出垂直居中的效果，需要注意的地方是，子元素必须要加上position:relative，不然就会没有效果喔。
.use-transform{ width:200px; height:200px; border:1px solid #000;}.use-transform div{ position: relative; width:100px; height:50px; top:50%; transform:translateY(-50%); background:#095;}

文章插图

6、绝对定位绝对定位就是CSS里头的position:absolute，利用绝对位置来指定，但垂直置中的做法又和我们正统的绝对位置不太相同，是要将上下左右的数值都设为0，再搭配一个margin:auto，就可以办到垂直置中，不过要特别注意的是，设定绝对定位的子元素，其父元素的position必须要指定为relative喔！而且绝对定位的元素是会互相覆盖的，所以如果内容元素较多，可能就会有些问题。
.use-absolute{ position: relative; width:200px; height:150px; border:1px solid #000;}.use-absolute div{ position: absolute; width:100px; height:50px; top:0; right:0; bottom:0; left:0; margin:auto; background:#f60;}

文章插图

7、使用FlexboxFlexbox可谓是我们在移动端用的最多的布局方法，因为大部分现代手机浏览器都支持这个方法了。Flexbox，使用align-items或align-content的属性，轻轻松松就可以做到垂直居中的效果喔！
.use-flexbox{ display:flex; align-items:center; justify-content:center; width:200px; height:150px; border:1px solid #000;}.use-flexbox div{ width:100px; height:50px; background:#099;}

文章插图

由于flexbox布局的属性众多，如何方便记忆，笔者赠送大家一张图：

文章插图

本文内容参考来源
https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html
由于源文是繁体，笔者在内容上做了一些调整。
小节以上就是笔者整理的一些垂直居中的方法，由于垂直居中往往会动用到修改display这个属性，往往会在排版上造成一些影响，例如不该用flexbox 的地方如果用了flexbox，不该用table 的地方用了table，不该用inline-block 的地方用了inline-block，后续反而要多写许多其他的定位样式来进行修正，那就有点本末倒置了，因此如何活用这些CSS 垂直居中的方法，就要依据大家的版面结构进行灵活运用啰！^_^ 如果你有其他本文没有提及到的垂直居中方法，欢迎到留言区进行分析哟。

【CSS 垂直居中的七种方法，值得收藏】