通过CSS控制页面中的内容垂直居中的方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

方法一：通过行高（line-height）定位
line-height通常是用于调节一段文字的行与行之间的距离，或者说两行文字之间的距离，如果行高是500px，那么每一行中的文字距离本行的顶部就是250px，如果将文字的行高设为500px，并且外面的容器高度也设为500px，就可以实现这行文字垂直居中，这样做的缺点是如果内容过多，文字就跑到了下一行，就不是居中了，所以限制较多。

具体代码：

<html>
<head>
<style> 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;
}
</style>
</head>
<body>
<h1>Hi, I'm<span>Vertically Aligned</span></h1>
</body>
</html>

方法二：通过绝对定位布局进行布局

基本的思路是，获取元素的高h和宽w，然后找到页面的中心点（x，y），在css中控制元素margin的上为-h/2，左为-w/2。而这样做的局限则是，该页面元素必须是块状元素，必须指定高和宽，而且如果在其中放置动态元素，结果可能会很糟糕。

具体代码：

<html>
<head>
<style> .vert {
width: 580px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin: -95px 0 0 -290px;
}
</style>
</head>
<body>
<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>
</body>
</html>

在方法二的基础上扩充一下，如果需要让其在父元素中垂直居中呢？其实不难，只要将其父元素采用相对定位，设置高和宽，就可以了，这样子元素的定位的原点就是相对与父元素的左上角，而不是页面的左上角了。

具体代码：

<html>
<head>
<style>
.vert {
width: 580px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin: -95px 0 0 -290px;
}
.container {
position: relative;
height: 500px;
width: 800px;
border: 10px solid #999;
background: #F00;
margin: 20px;
}
</style>
</head>
<body>
<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>
</body>
</html>