方法一：通过行高（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. java中"=="和equals方法究竟有什么区别？

    为什么会说到这个问题呢,是因为在java中遇到这个问题太常见了,无论是在写代码时还是在面试时.下面就一起探讨一下它们之间的联系与区别吧. 首先对于这样的问题,一般是先单独把一个东西说清楚,然后再说另一 ...

  2. cadence中画焊盘注意事项

    贴片焊盘的层面剖析图如下: 其中Paste Mask Top层用于制作钢网,可以做成与Top层相同的大小.阻焊层一般比顶层大0.1mm(方形焊盘的长,宽,圆形焊盘的直径). 助焊层与阻焊层区别 两个层 ...

  3. Mysql学习总结（43）——MySQL主从复制详细配置

    环境 操作系统:CentOS-6.6-x86_64-bin-DVD1.iso MySQL版本:mysql-5.6.26.tar.gz 主节点IP:192.168.1.205 主机名:edu-mysql ...

  4. xtu summer individual 6 D - Checkposts

    Checkposts Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Orig ...

  5. hdu 3622 二分+2-sat

    /* 二分+2-sat 题意:在一个二维平面上给你n个炸弹,和2*n个位置,每一行的两个位置只能有一个放炸弹 现在炸弹爆炸有一个半径,当炸弹爆炸时两个炸弹的半径化成的圆不能相交,求最大半径 二分半径, ...

  6. 【ZJOI2017 Round1练习】D8T2 sequence（DP）

    题意: 思路: #include <algorithm> #include <iostream> #include <cstring> #include <c ...

  7. BZOJ2272: [Usaco2011 Feb]Cowlphabet 奶牛文字

    n<=250个大写字母和m<=250个小写字母,给p<=200个合法相邻字母,求用这些合法相邻字母的规则和n+m个字母能合成多少合法串,答案mod 97654321. 什么鬼膜数.. ...

  8. SQL SERVER 2012 第三章 T-SQL 基本SELECT语句用法，Where子句详细用法

    select [all|distinct] [top (<expression>) [Percent] [with ties]] <column list> [from < ...

  9. litepal创建数据库表失败

    今天学习郭神的litepal框架遇到了一个坑,就是程序正常跑了,但是数据库和表完全没创建!!!!!!! 先核对了litepal.xml文件,确认配置正确,assets文件夹放的也正确,最后发现竟然是因 ...

  10. MyBatis 3在Insert之后返回主键

    XML: <insert id="addUser" parameterType="User" useGeneratedKeys="true&qu ...