在前端面试的时候我们经常会被问道怎样使一个元素在页面垂直居中呢，这也是一个老生常谈的问题了。

解决的方法基本都是使用定位来实现

 div{display: fixed;left: 50%;top: 50%;width: 200px;height: 200px;margin-left: -100px;margin-top: -100px;}

但是面试官可能还会问如果不使用定位，那你你会怎么做呢？也许会蒙了，也许会随便说但实现不了，这里我给大家分享另外一种垂直居中的方法。

display：table;看例子

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Vertical centering in valid CSS</title>

 <style type="text/css">

     *{margin: 0;padding: 0;}

     body,html{height: 100%; }

     #outer {height: 100%;width: 100%;display: table;}

     #box{display: table-cell;vertical-align:middle;}

     #div{width: 500px;height: 300px;margin: 0 auto;background: #eee;}

 </style>

 </head>

 <body>

 <div id="outer">

     <div id="box">

         <div id="div"></div>

     </div>

 </div>

 </body>

 </html>

你可以给HTML元素指定与表格相关的display属性值，使得它们像表格元素那样渲染。以下是这些可用的display属性值：

table
使该元素按table样式渲染
table-row
使该元素按tr样式渲染
table-cell
使该元素按td样式渲染
table-row-group
使该元素按tbody样式渲染
table-header-group
使该元素按thead样式渲染
table-footer-group
使该元素按tfoot样式渲染
table-caption
使该元素按caption样式渲染
table-column
使该元素按col样式渲染
table-column-group
使该元素按colgroup样式渲染

创建匿名表格元素的规则

这些匿名的盒对象不是用魔术变出来的，它们也不会自动往你的HTML源码中添加新的标签。为了完全发挥出匿名表格元素的优势，你最好能够对创建它们的规则有所了解。如果布局中调用了匿名元素，浏览器将会根据需要创建一个匿名的盒对象并将它的CSS display属性设置为table、table-row或table-cell中的一个。
如果某个元素已经被设置为“display:table-cell;”，而它的父节点（包含它的容器）没有被设置为“display:table-row;”属性，那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含，直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。以下是相关的代码样例：

<div class=”cell”>CELL A</div>
<div class=”cell”>CELL B</div>
<div class=”cell”>CELL C</div>
<div>Not a cell</div>

上面的三个类名为“cell”的div元素均被设置为“display:table-cell;”，它们将会像一个单行表格的三个单元格一样并列排布。最后一个div元素则不会被包含在这一表格行当中，因为它没有被设置成“display:table-cell;”。
如果某个元素被设置为“display:table-row;”，而它的父节点没有被设置为“display:table;”（或者“display:table-row-group;”），浏览器将会创建一个被设置为“display:table;”的匿名盒对象来嵌套它，与之相邻的属性为“display: table-row;”的兄弟节点也都会被包含其中。同样，如果某个元素被设置为“display:table-row;”，但它的内部却缺少“display:table-cell;”的元素，那么一个匿名的table-cell将会被创建，用来包含该table-row中的所有元素。

css垂直居中 两种方法的更多相关文章

  1. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  2. CSS 垂直居中5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  3. css垂直居中几种方法（二）

    方法1:table-cell .box1{ display: table-cell; vertical-align: middle; text-align: center; } <div cla ...

  4. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  5. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

  6. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  7. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  8. CSS实现自适应不同大小屏幕的背景大图的两种方法（转自简书）

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  9. 实现icon和文字垂直居中的两种方法－（vertical-align and line-height）

    方法一:vertical-align 在w3school定义:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 百思不得骑姐 然后Google,反正在w3schools上面并没有找到定义 仅 ...

随机推荐

  1. Win10激活KMS

    Windows 10是目前微软主推的Windows系统,Win10 相对之前的Win7/8是吸取二者之长,发展而来! 目前新装的Windows10默认没有激活的 芝麻开们:http://pan.bai ...

  2. C#属性-索引器-里氏替换-多态-虚方法-抽象-接口-泛型-

    1.属性 //属性的2种写法 public class person { private string _name; public string Name { get { return _name; ...

  3. [webpack] webpack-dev-server介绍及配置

    webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务.webpack-dev-server官方文档 w ...

  4. ubuntu搭建shad(-_-)owscoks(影梭)

    准备步骤 apt-get updateapt-get install python-gevent python-pippip install shadowsocks 新建一个json文件内容如下,文件 ...

  5. JavaScript零基础学习系列二

    条件控制 if(条件){//语句块}如果条件(小括号里面的)满足true.那么才会执行大括号里面的代码,如果条件不满足(false),那么不执行,注意:有可能代码不会执行. 例如: if(3>1 ...

  6. C#-WinForm-Treeview-树状模型

    Treeview - 树状模型 利用递归添加数据 数据放入 treeView1.Nodes.Add() 中 public Form3() { InitializeComponent(); TreeNo ...

  7. SVN随记

    SVN中提交代码时报如下错误 commit -m "sync" E:/resource/rad_workspace/IMSCrawl/src/configuration.prope ...

  8. BZOJ2242 [SDOI2011]计算器

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  9. mysql日期格式化

    DATE_FORMA T(date, format) 根据格式串format 格式化日期或日期和时间值date,返回结果串. 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值 ...

  10. AXIS 调用 webservice服务时传递 服务器验证需要的用户名密码

    System.setProperty("javax.net.ssl.trustStore", T.class.getResource(".").getPath( ...