方法一：通过行高（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. （转载）C++ string中find() ，rfind() 等函数 用法总结及示例

    string中 find()的应用  (rfind() 类似,只是从反向查找) 原型如下: (1)size_t find (const string& str, size_t pos = 0) ...

  2. 一个IT工薪族的4年奋斗成果

     关于标题:为了方便传播,使用了"最简化"的一段. 过段时间,考虑改为"大学毕业4年-回顾和总结(11):一个IT工薪族的4年奋斗成果(2012年6月17日~2016年6 ...

  3. STM32F407 开发环境搭建 程序下载 个人笔记

    详细资料: http://www.openedv.com/thread-13912-1-1.html 需要安装的软件: 1.keil(MDK,必选),用keygen破解 2.CH340驱动,(usb串 ...

  4. 防火墙内设置FileZilla Server注意事项

    开启了Windows下的防火墙,如何设置FileZilla Server 相关选项,能在服务器端只开启21,23端口就可以正常连接使用 方法/步骤   1.       开启windows防火墙,同时 ...

  5. 上传图片+生成缩略图 ashx代码

    html页面 <form action="Handlers/UploadImageHandler.ashx" method="post" enctype= ...

  6. 动态链接 - dll和so文件区别与构成

    动态链接,在可执行文件装载时或运行时,由操作系统的装载程序加载库.大多数操作系统将解析外部引用(比如库)作为加载过程的一部分.在这些系统上,可执行文件包含一个叫做import   directory的 ...

  7. MongoDB小结05 - update【$set & $unset】

    用$set指定一个键的值,如果不存在,就创建它.这对更新模式或者增加用户定义很有帮助. db.user.insert({"name":"codingwhy.com&quo ...

  8. UVA 567 Risk【floyd】

    题目链接: option=com_onlinejudge&Itemid=8&page=show_problem&problem=508">https://uva ...

  9. [Algorithms] Determine if a string is a palindrome

    A palindrome is a string that reads the same forward and backward, for example, radar, toot, and mad ...

  10. 通过android XML 创建图形，降低对美工的依赖

    在开发中总会须要自己定义各种View的样式,假设总是依赖美工作图弄出须要的UI样式图片(比方:一个button要选中和默认两张图片),不但时间上会浪费.往往也会有适配问题. 尽管能够通过.9图来解决一 ...