目录
一、常用单行文字居中（line-height/padding）
二、模拟表格方式 ***
三、css3 transform
四、flex布局
一、常用单行文字居中（line-height/padding）
p{ height:30px; line-height:30px; width:100px; overflow:hidden; }
p { padding:20px 0; }
二、模拟表格方式 ***
父组件设置 display: table; 子组件设置 display: table-cell; vertical-align: middle
<div style="display: table"><div style="display: table-cell; vertical-align: middle"><p>测试垂直居中效果测试垂直居中效果</p><p>测试垂直居中效果测试垂直居中效果</p></div></div>
三、css3 transform
.content{position: relative;top:50%;transform:translateY(-50%);}
四、flex布局
.flex{/*flex 布局*/display: flex;/*实现垂直居中*/align-items: center;/*实现水平居中*/justify-content: center;text-align: justify;width:200px;height:200px;background: #000;margin:0 auto;color:#fff;}
