码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-02-28 18:35:17      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

方法:通过行高(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>

 

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

标签:

原文地址:http://www.cnblogs.com/ScorchingSun/p/4305904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!