方法一：通过行高（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. Spring Boot 2(一)：【重磅】Spring Boot 2.0权威发布

    就在今天Spring Boot2.0.0.RELEASE正式发布,今天早上在发布Spring Boot2.0的时候还出现一个小插曲,将Spring Boot2.0同步到Maven仓库的时候出现了错误, ...

  2. STM32——NVIV:嵌套中断向量控制器

    STM32有43个channel的settable的中断源:AIRC(Application Interrupt and Reset Register)寄存器中有用于指定优先级的4 bits.这4个b ...

  3. The Text Splitting (将字符串分成若干份，每份长度为p或q）

    Description You are given the string s of length n and the numbers p, q. Split the string s to piece ...

  4. github some rank

    github some rank http://githubrank.com/

  5. Notepad++ 连接远程 FTP 进行文件编辑

    一.下载安装 Notepad++ 1.下载 Notepad++ : https://pan.baidu.com/s/1o7VrS4y 密码 : ck8a 2.安装 Notepad++ 2.1.勾选所有 ...

  6. mysql和Oracle 备份表

    1.SQL Server中,如果目标表存在: insert into 目标表 select * from 原表; 2.SQL Server中,,如果目标表不存在: select * into 目标表  ...

  7. 重启系统media服务

    1.adb shell 执行 stop media & start media 或者stop media ; start media 2.代码里执行 import android.os.Sys ...

  8. 2018/3/14 Hadoop学习笔记(一)

    首先,什么是Hadoop?为什么它是现在大数据处理最热门的框架呢?(正确来说,现在Hadoop是一个生态圈) Hadoop是apache下一套开源的服务框架,它主要的作用就是利用服务器集群,来对海量数 ...

  9. Elasticsearch自定义客户端（TransportClient）资源池

    前言: java中调用TransportClient时,我们一般都会设置成单例,为了避免多次的创建与关闭造成的内存占用及关闭缓慢问题.而TransportClient本身也是实现了线程池threadP ...

  10. console command

    routes/console.php copy一个默认的 Artisan::command('hello', function () { $this->comment('hello world' ...