从这几篇文章以及自己一年的前端经验总结出来的，flex的方式有空再写。知乎 segmentfault CSDN
1.单行文本的文字垂直居中
如下所示，块级元素的高度已给定，如何实现这个块级元素里的文本垂直居中呢？
<style> #menu { background-color: #888; height: 30px; } </style> </head> <body> <div id="menu">首页</div> </body>
答案是设置块级元素的line-height与height相等。原理是什么？读过《CSS权威指南》的应该知道，line-height是个继承属性，这里设置的line-height值被假想的行内文本元素给继承了。有时候会有单行文本居中在不同手机表现不一致的问题，那很可能是字体的原因，给font-family多设置好几个字体试一下。
<style> #menu { background-color: #888; height: 30px; line-height: 30px; } </style> </head> <body> <div id="menu">首页</div> </body>
2.多行文本或图片等相对于父元素垂直居中
如下图所示，父元素的高度已给定。
<style> .outer { width: 200px; height: 200px; background-color: #888; } </style> </head> <body> <div class="outer"> <div class="inner">好吃你就多吃点,好吃你就多吃点,好吃你就多吃点,好吃你就多吃点 </div> </div> </body>
对父元素使用display:table-cell以及vertical-align: middle即可。
<style> .outer { width: 200px; height: 200px; display: table-cell; vertical-align: middle; background-color: #888; } </style> </head> <body> <div class="outer"> <div class="inner">好吃你就多吃点,好吃你就多吃点,好吃你就多吃点,好吃你就多吃点 </div> </div> </body>
3.自适应高度的垂直居中
同时水平居中，加left: 50%; transform: translate(-50%, -50%);
<style> .outer { height: 100px; position: relative; background-color: #888; } .inner { position: absolute; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div class="outer"> <div class="inner"> 好吃你就多吃点，好吃你就多吃点 </div> </div> </body>
4.固定宽度的水平居中
这个最简单啦，只要把左右margin设为auto即可。
<style> .inner { /*margin: 0 auto;*/ width: 120px; background-color: #888; } </style> </head> <body> <div class="inner"> 好吃你就多吃点 </div> </body>
反注释margin后就是如下了
5.自适应宽度的水平居中
<style> /*.navbar { text-align: center; } .navbar ul { display: inline-block; }*/ .navbar li { float: left; } .navbar li + li { margin-left: 20px; } </style> </head> <body> <div class="navbar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> </ul> </div> </body>
要是子元素居中，只需要对父元素用text-align:center子元素用display:inline-block即可。text-align这个属性除了对文本有效，对行内元素也是有效的。反注释两行代码，看看效果
还有一种是通过display:table是实现的，我自己一般不用。上面的CSS代码改成如下即可
<style> .navbar { display: table; margin: 0 auto; } .navbar li { display: table-cell; } .navbar li + li { margin-left: 20px; } </style>
