方法一：通过行高（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. 什么是CPU密集型、IO密集型？（转发）

    CPU密集型(CPU-bound) CPU密集型也叫计算密集型,指的是系统的硬盘.内存性能相对CPU要好很多,此时,系统运作大部分的状况是CPU Loading 100%,CPU要读/写I/O(硬盘/ ...

  2. prometheus监控linux系统

    安装node exporter 创建Systemd服务 #vim /etc/systemd/system/node_exporter.service[Unit]Description=mysql_ex ...

  3. js获取指定字符前/后的字符串简单实例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Wireshark抓包工具的简单使用1（界面介绍）

    Wireshark安装完成后,就可以打开,具体运行界面如下 一.菜单——用于开始操作 File ——包括打开.合并捕捉文件,save/保存,Print/打印,Export/导出捕捉文件的全部或部分.以 ...

  5. [luoguP3572] [POI2014]PTA-Little Bird（DP + 单调队列）

    传送门 DP方程 f[i] = f[j] + (a[j] <= a[i]) ( i - k < j < i ) 要使 f[i] 最小,需要等号后面的值最小,可以用单调队列来维护. 至 ...

  6. android源码mm时的编译错误no ruler to make target `out/target/common/obj/JAVA_LIBRARIES/xxxx/javalib.jar', needed by `out/target/common/obj/APPS/xxxx_intermediates/classes-full-debug.jar'. Stop.

    瞧见没有,就因为多了这一个反斜杠,浪费了一下午时间找问题,哭了~~~~

  7. 常用生产环境的PHP安装参数

    ./configure --prefix=/usr/local/php5. --with-mysql=/usr/local/mysql --with-mysqli=/usr/local/mysql/b ...

  8. P1631 序列合并 洛谷

    https://www.luogu.org/problem/show?pid=1631 题目描述 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2个和,求这N^2个和中最小的N个. ...

  9. Linux系统备份还原工具4（rsync/远程数据同步工具）

    rsync即是能备份系统也是数据同步的工具. 在Jenkins上可以使用rsync结合SSH的免密登录做数据同步和分发.这样一来可以达到部署全命令化,不需要依赖任何插件去实现. 命令参考:http:/ ...

  10. 2、Java并发性和多线程-多线程的优点

    以下内容转自http://ifeve.com/benefits/: 尽管面临很多挑战,多线程有一些优点使得它一直被使用.这些优点是: 资源利用率更好 程序设计在某些情况下更简单 程序响应更快 资源利用 ...