方法一：通过行高（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控制页面中的内容垂直居中的方法的更多相关文章

  1. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  2. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  3. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  4. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  5. Android : 如何在WebView显示的页面中查找内容

    Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...

  6. 【学习DIV+CSS】2. 学习CSS（一）--CSS控制页面样式

    1. CSS如何控制页面 使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现C ...

  7. Python抓取页面中超链接(URL)的三中方法比较(HTMLParser、pyquery、正则表达式) <转>

    Python抓取页面中超链接(URL)的3中方法比较(HTMLParser.pyquery.正则表达式) HTMLParser版: #!/usr/bin/python # -*- coding: UT ...

  8. js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...

  9. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

随机推荐

  1. Jbox 弹出窗口 子页面操作完成后关闭 父页面刷新

    父页面js //父页面js <script> var isFreshFlag = '1'; //添加会议活动 function addMeetingAct(){ var attendVip ...

  2. 用二分法计算a的n次幂<算法分析>

    实验目的:1.复习java编程:2.掌握二分法的基本原理:3.掌握使用java程序进行二分法计算a的n次幂.实验步骤:1.由用户输入a及n(均为整数):2.利用二分法完成计算,并将中间结果打印出来. ...

  3. msp430入门学习11

    msp430的定时器--看门狗 msp430入门学习

  4. msp430入门学习10

    msp430的定时器--看门狗 msp430入门学习

  5. Codeforces 777E（离散化+dp+树状数组或线段树维护最大值）

    E. Hanoi Factory time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  6. P1340 兽径管理 洛谷

    https://www.luogu.org/problem/show?pid=1340 题目描述 约翰农场的牛群希望能够在 N 个(1<=N<=200) 草地之间任意移动.草地的编号由 1 ...

  7. 05-js德玛==和===判断

    <html> <head> <title>js的特殊关系运算符</title> <meta charset="UTF-8"/& ...

  8. Java高并发实战，锁的优化

    锁优化 这里的锁优化主要是指 JVM 对 synchronized 的优化. 自旋锁 互斥同步进入阻塞状态的开销都很大,应该尽量避免.在许多应用中,共享数据的锁定状态只会持续很短的一段时间.自旋锁的思 ...

  9. spring-kafka

    spring-kafka 使用spring-kafka的小伙伴,看过来. 说明 因为spring-kafka封装的比较厉害,可能跟你实际使用起来有很大的差别. 一个简单的消费例子 在spring-bo ...

  10. CE310A

    http://v.ku6.com/show/tvWNTLZTVWuGVPE5ZMSUyQ...html