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

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

 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. 【转】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  2. duilib帮助

    1.窗口基类:见介绍 顺便贴下出来,留底. .h class WindowImplBase : public CWindowWnd, public INotifyUI, public IMessage ...

  3. Linux命令 -- 查看系统版本的各种方法

    适用于CentOS

  4. canvas弹动2

    在上一次的例子上加深一点点,这次我们选择动态的绑定目标点,三个目标相互转化,实现的思路是以拖拽点为目标计算出除了拖拽点以外的两个圆球的位置 以上个案例的公式,设点分别为A,B,C,当我拖拽点A时其余两 ...

  5. redis-删除所有key

    删除所有Key,可以使用Redis的flushdb和flushall命令 //删除当前数据库中的所有Key flushdb //删除所有数据库中的key flushall 如果要访问 Redis 中特 ...

  6. Pycharm 输出中文或打印中文乱码现象的解决办法

    1. 确保文件开头加上以下代码: # -*- coding:utf-8 -*- 还可以加上 import sys reload(sys) sys.setdefaultencoding('utf-8') ...

  7. Python的MySQLdb模块安装

    MySQL-python-1.2.1.tar.gz  下载地址:https://pan.baidu.com/s/1kVfH84v 然后解压,打开README(这个其实没有什么鸟用) 里面有安装过程: ...

  8. 69个经典Spring面试题和答案

    Spring 是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring 框架目标是简化Java企业级应用开发,并通过PO ...

  9. APP开发+发布流程

    ios开发(证书+应用发布) 证书获取:http://newdocx.appcan.cn/newdocx/docx?type=1297_1291ios应用发布:http://newdocx.appca ...

  10. 使用mosh取代ssh提高n2n网络连接稳定性

    上文实现了远程n2n访问树莓派,但是ssh协议在网络状况不好的时候命令会卡住.这里发现了一个mosh协议,可以增强稳定性,使用后效果明显. 背景:使用n2n之后,在比较差的网络环境下,经常会被time ...