各种居中方式小记

1.单行内容的居中

.middle-demo-1{ height: 4em; line-height: 4em; overflow: hidden; }

2.父元素未设置高度，内容居中 

.middle-demo-2{ padding-top: 24px; padding-bottom: 24px; }

3.子元素有固定高度，使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。

#content { position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */ }

4.使用表格的 vertical-align property 属性

#wrapper {display:table;} #cell {display:table-cell; vertical-align:middle;}

5.子元素 position:absolute，有固定宽度和高度

#content { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%; }

6.使用css3的translate

css{position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);}

 

<摘自：春华秋实>

转载于:https://www.cnblogs.com/ChandlerVer5/p/css_center_middle.html

相关资源：JAVA上百实例源码以及开源项目