标签：color logs sla ddl osi 盒模型 pre 垂直居中 flex
1、行内元素居中 line-height（须知高度）
.box{ height:300px; } p{ line-height:300px; }
2、table居中 display:table-cell;vertical-align:middle;
.box{ display:table; } p{ display: table-cell; vertical-align: middle; }
3、绝对定位，top+margin-top:-xxpx（须知高度）
.box{ position:relative; } p{ position:absolute; top:50%; margin-top:-50px; width:100px; height:100px; }
4、绝对定位 top+tranform
.box{ position:relative; } p{ position:absolute; top:50%; transform: translate(0,-50%); }
5、使用绝对定位 position left right bottom top margin:auto（须知高度）
.box{ position:relative; width:400px; height:400px; } p{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 100px; }
6、flex弹性盒模型 align-items:center
.box{ display: flex; align-items: center; }
标签：color logs sla ddl osi 盒模型 pre 垂直居中 flex
原文地址：http://www.cnblogs.com/congfeicong/p/7246958.html
