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

浏览数：30 / 时间：2015年06月09日

方法一：通过行高（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>