一、行高(line-height)法
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
二、内边距(padding)法
另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:
p { padding:20px 0; }
三、模拟表格法
将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
html结构如下:
<div id="wrapper"><div id="cell"><p>测试垂直居中效果测试垂直居中效果</p><p>测试垂直居中效果测试垂直居中效果</p></div></div>
css代码:
#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}#cell{display:table-cell; vertical-align:middle;}
四、CSS3的transform来实现
css代码如下:
.center-vertical{position: relative;top:50%;transform:translateY(-50%);}.center-horizontal{position: relative;left:50%;transform:translateX(-50%); }
五:flex布局
html代码:
<div class="flex"><div><p>我是多行文字我是多行文字我是多行文字我是多行文字</p><p>我是多行文字我是多行文字我是多行文字我是多行文字</p></div></div>
CSS代码:
.flex{/*flex 布局*/display: flex;/*实现垂直居中*/align-items: center;/*实现水平居中*/justify-content: center;text-align: justify;width:200px;height:200px;background: #000;margin:0 auto;color:#fff;}