方法一：利用行高（line-height）定位
line-height通常是用于调节一段文字的行与行之间的距离，或者说两行文字之间的距离，如果行高是500px，那么每一行中的文字距离本行的顶部就是250px，如果将文字的行高设为500px，并且外面的容器的高度也为500px，同样可以实现垂直居中，但是用它来实现垂直居中，也是有缺点的，就是如果内容过多，文字就会跑到下一行，那么内容就不可能垂直居中了。
HTML代码：
|
1 |
<h1>Hi, I'm<span>Vertically Aligned</span> Within the H1</h1> |
CSS代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
body { margin: 0; padding: 0; background: #1d1d1d; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { font: 3em Georgia, "Times New Roman", Times, serif; color: #fff; height: 500px; line-height: 500px; text-align:center; border: 10px solid #999; } h1 span { font-weight: bold; font-size:1.5em; color: #fff000; } p { font-size: 1.3em; color: #999; } strong { color: #fff; } |
方法二：利用绝对定位
先来看看效果，查看演示
这个方法有个缺点我必须指出，就是外面的块状元素，必须指定高度，所以如果你在里面放动态的内容的话，后果会很糟糕滴~
HTML代码：
|
1 2 3 4 |
<div class="vert"> <h1>Hi, I'm<span>Vertically Aligned</span></h1> <p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p> </div> |
CSS代码
这种用绝对定位来实现的垂直居中，取决与元素的宽度和高度，你可以用下面这两个公式来计算元素的左边距和上边距
元素的宽度/2 = 负左边距
元素的高度/2 = 负上边距
在这个例子中，我们就是这么计算的
|
1 2 3 4 5 6 7 8 |
.vert { width: 580px; height: 190px; position: absolute; top: 50%; left: 50%; margin: -95px 0 0 -290px; } |
完整CSS代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
body { margin: 0; padding: 0; background: #1d1d1d; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { font: 4em Georgia, "Times New Roman", Times, serif; color: #fff; border-bottom: 5px dotted #999; margin: 0; padding: 0 0 10px; } h1 span { font-weight: bold; display:block; font-size:1.5em; color: #fff000; } p { font-size: 1.3em; color: #999; } strong { color: #fff; } .vert { width: 580px; height: 190px; position: absolute; top: 50%; left: 50%; margin: -95px 0 0 -290px; } |
问题延伸
如果元素的外面还有一个父级元素，如果才能让元素垂直居中于父级元素内部？比如下面的代码，多了一个父级元素
|
1 2 3 4 5 6 |
<div class="container"> <div class="vert"> <h1>Hi, I'm Nested &<span>Vertically Aligned</span></h1> <p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p> </div> </div> |
这时候，就必须在定义父级元素的CSS代码中加入position: relative;才能够使内部元素垂直居中于父级内部，代码如下：
|
1 2 3 4 5 6 7 8 |
.container { position: relative; height: 500px; width: 800px; border: 10px solid #999; background: #000; margin: 20px; } |
