CSS定位中常常用到垂直居中，比如覆盖层上的弹框。

兼容性比较好的方法：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<style type="text/css">

#box

{

 width:200px;

 height:100px;

 text-align:center;

 position: absolute;

 left: 50%;

 top: 50%;

 margin-top: -50px;    /* 高度的一半 */

 margin-left: -100px;    /* 宽度的一半 */

 background-color:#ffff99;

}

</style>

</head>

<body>

<div id="box">Hello World!</div>

</body>

</html>

这个方法只适用于已知宽高的块，因为要设置负边距来修正。
如果是未知尺寸的块，可以使用以下方法：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<style type="text/css">

#box

{

 width:200px;

 height:100px;

 text-align:center;

 position: absolute;

 left: 0;

 top: 0;

 right:0;

 bottom:0;

 margin:auto;

 background-color:#ffff99;

}

</style>

</head>

<body>

<div id="box">Hello World!</div>

</body>

</html>

原因是，绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的margin值。没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定边会分配 margin，都是自适应的。

IE7- 的渲染方式不同，渲染规则也不一样，他不会让定位元素去自适应。

现在有了CSS3，就又有新招数了：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<style type="text/css">

#box

{

 width:200px;

 height:100px;

 text-align:center;

 position: absolute;

 left: 50%;

 top: 50%;

 transform: translate(-50%, -50%);

 background-color:#ffff99;

}

</style>

</head>

<body>

<div id="box">Hello World!</div>

</body>

</html>

就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，和第一个方法思路类似。

也可以使用FlexBox实现：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8"/>

  <title>Centering an Element on the Page</title>

  <style type="text/css">

      html {

  height: 100%;

} 

body {

  display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */

  display: -moz-box;    /* 老版本语法: Firefox (buggy) */

  display: -ms-flexbox;  /* 混合版本语法: IE 10 */

  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */

  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */

  /*垂直居中*/

  /*老版本语法*/

  -webkit-box-align: center;

  -moz-box-align: center;

  /*混合版本语法*/

  -ms-flex-align: center;

  /*新版本语法*/

  -webkit-align-items: center;

  align-items: center;

  /*水平居中*/

  /*老版本语法*/

  -webkit-box-pack: center;

  -moz-box-pack: center;

  /*混合版本语法*/

  -ms-flex-pack: center;

  /*新版本语法*/

  -webkit-justify-content: center;

  justify-content: center;

  margin: 0;

  height: 100%;

  width: 100% /* needed for Firefox */

}

/*实现文本垂直居中*/

h1 {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  -webkit-box-align: center;

  -moz-box-align: center;

  -ms-flex-align: center;

  -webkit-align-items: center;

  align-items: center;

  height: 10rem;

}   

  </style>

</head>

<body>

  <h1>OMG, I’m centered</h1>

</body>

</html>

CSS垂直水平居中方法整理的更多相关文章

  1. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  2. （转载）css垂直水平居中的整理

    方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...

  3. 关于css垂直水平居中的几种方式

    css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...

  4. css 垂直+水平居中

    垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...

  5. CSS之垂直水平居中方法

    //居中方法1 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 346px; height ...

  6. CSS图片垂直居中方法整理集合

    原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...

  7. css 垂直水平居中总结

    一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...

  8. css垂直水平居中方案

    1. 水平居中 如果是inline元素:在父元素上面设置text-align:center; 如果是block元素:设置宽度和margin:0 auto; 如果是多块级元素:在父元素上面设置text- ...

  9. CSS垂直水平居中

    小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...

随机推荐

  1. 黄聪：Discuz X2.5、3.0、3.1、3.2 如何不用插件实现用户名只允许中文注册

    1.在后台--注册与访问--注册链接文字,把“注册”改为“中文注册”或“注册(请使用中文注册)”等   2.后台UCenter管理中心---注册设置---禁止的用户名:   *q* *w* *e* * ...

  2. 3. Map与Tuple

    一. Map 对偶 (1)对偶是一个映射.多个对偶形成map (2)对偶的表示:(k,v)或者k->v Map(哈希类型) (1)map的声明与查询 scala> val map1 = M ...

  3. (C#) Lock - 将对象上锁，互斥多个线程，使同步。

    C# Lock 原文:http://www.dotnetperls.com/lock Locking is essential in threaded programs. It restricts c ...

  4. ASP.NET MVC 基础(01)

    [ASP.NET MVC ]系列文章大致会包含这样一些内容: 1.ASP.NET MVC 的一些高级知识点: 2.ASP.NET MVC 的一些最新技术: 3.ASP.NET MVC 网站安全方面的知 ...

  5. MVC ViewData和ViewBag[转]

    转自:http://blog.csdn.net/a497785609/article/details/7854402#t0       视图数据可以通过ViewBag属性访问,它主要是为了从Contr ...

  6. tuple解包给类的构造函数

    首先我们的第一步当然是将tuple解包.tuple提供了一个get函数来获取第N个元素.例如: get<1>(make_tuple(...)); 要将一个tuple全部拆解,就可以使用通过 ...

  7. Ubuntu各个版本的介绍

    Ubuntu的版本比较多,而且基于ubuntu的衍生版也很多,让人容易混淆,也让很多人不知道自己适合哪一个,在这里简单比较一下ubuntu的各个版本的特点: 介绍ubuntu版本之前先说一说与ubun ...

  8. java中的IO整理

    写在前面:本文章基本覆盖了java IO的全部内容,java新IO没有涉及,因为我想和这个分开,以突出那个的重要性,新IO哪一篇文章还没有开始写,估计很快就能和大家见面.照旧,文章依旧以例子为主,因为 ...

  9. 30岁IT男连续工作一个月 突然失聪

    连续开发软件一个月,30 岁男子突然听不见声音了.近日,浙江省中山医院针灸科主任高宏主任中医师接诊了这名患者.高主任说,现在很多年轻人工作压力大,得突发性耳聋的越来越多,这种病听着不是威胁生命的大病, ...

  10. Bug 是改不完滴

    ​