在css的世界里，如果我们想让一个块级元素水平居中，想必大家都知道利用margin:0 auto;嘛，这样就可以让块级元素在它的父元素中水平居中了。

列如这样：

<!DOCTYPE html>

    <head>

        <title>center</title>

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

        <style>

            .parent {

                width:50%;

                height:100px;

                border:1px solid black;

                position:relative;

            }

            .child {

                margin:0 auto;

                width:50px;

                height:50px;

                background:#22B14C;

            }

        </style>

    </head>

    <body>

        <div class="parent">

               <div class="child">

            </div>

        </div>

    </body>

</html>

运行效果图如下，绿色方块水平居中于它的父元素

咦，那么问题来了，我们想要绿色方块垂直居中或者水平垂直居中呢？

是不是只要设置margin:auto 0;或margin:auto;就可以了呢？

曾经我也是这么以为的，因为设置margin:0 auto;可以水平居中嘛。

但是垂直居中就不是这么回事啦。

在普通文档流中，倘若你设置margin:auto，其实浏览器解析时，会理解为margin:0 auto;

（将margin-top和margin-bottom设置为0，而margin-left和margin-right设置为左右自适应）。

摘自W3.org

如果你心存顾虑，可以将上面demo中的margin:0 auto;换成margin:auto;，运行后的结果是一样的。

咦，那如果我们现在想让块级元素垂直居中呢，如何处理？

方法一：

将元素设置为绝对定位absolute，这样就可以让元素脱离普通文档流，且absolute有一特性：会将元素的display设置为block。

然后，再设置绝对定位的坐标(left,top,right,bottom)为0，这样会使浏览器为绝对定位包裹一层新的盒子模型。

再结合margin，就可以你想水平居中(margin:0 auto;)就居中，垂直居中(margin:auto 0;)就居中了，水平垂直居中(margin:auto;)也完美。

下面列举的demo为‘水平垂直居中’：

<!DOCTYPE html>

    <head>

        <title>center</title>

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

        <style>

            .parent {

                width:50%;

                height:100px;

                border:1px solid black;

                position:relative;

            }

            .child {

                margin: auto;

                position: absolute;

                top:0;

                left:0;

                bottom:0;

                right:0;

                width:50px;

                height:50px;

                background:#22B14C;

            }

        </style>

    </head>

    <body>

        <div class="parent">

               <div class="child">

            </div>

        </div>

    </body>

</html>

PS：position:fixed也可以脱离文档流，so它和absolute是一样儿滴，区别就是fixed是相对于浏览器窗口进行定位的。

方法二：

方法一是通过改变元素的文档流，那么除开改变它的文档流呢？

那我们就另辟蹊径，计算元素的宽高嘛。

么子意思？

以‘垂直居中’举例，倘若我们有个子元素child，需要垂直居中于它的父元素parent。如下：

　　　　　　　　　　　　　图一

那么首先我们得将子元素child以父元素的顶点(top,left=0  如上图所示)，往下和右移动父元素宽高的50%；如下图所示：

　　　　　　　　　　　　　图二

再将子元素Child以parent中心点，往上和左移动自身元素宽高的50%，就垂直居中啦，如下图所示：

　　　　　　　　　　　　　图三

好了，这个流程我们是理清楚了，那用CSS应该怎么实现呢？

列举2个:

（1）、 margin + absolute

设置child为absolute，将其top、right皆为50%，那么就使得子元素层显上图图二的情况；

再将元素的margin-top，margin-right设置为-50%，那么就可以实现垂直居中啦。

示例代码如下：

<!DOCTYPE html>

    <head>

        <title>center</title>

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

        <style>

            .parent {

                width:50%;

                height:100px;

                border:1px solid black;

                position:relative;

            }

            .child {

                position:absolute;

                width:50px;

                height:50px;

                top:50%;

                left:50%;

                margin-top:-25px;

                margin-left:-25px;

                background:#22B14C;

            }

        </style>

    </head>

    <body>

        <div class="parent">

            <div class="child">

            </div>

        </div>

    </body>

</html>

注：margin的百分比值参照其包含块的宽度进行计算的。

另外默认浏览器一般默认writing-mode:horizontal-tb和direction:ltr，即横向排版，所以margin无论宽高设置百分比时，都会以父元素的width进行计算。纵向嘛就是以父元素的height进行计算咯。
      PS:如果你想纵向排版可以这么设置
      #demo{
          　　　　/*for browsers of wekit engine*/
         　　　　 -webkit-writing-mode: vertical-rl ；
         　　　　/*for ie*/
        　　　　 writing-mode: tb-rl;
      }
      所以方法二中用margin+absolute让子元素居中时，margin必须要知道子元素的宽高，切忌不能用百分比。

（2）、 translate + absolute

设置child为absolute，将其top、right皆为50%，那么就使得子元素层显上图图二的情况；

再通过translate将元素移动50%,50%，也可以得到图三，实现垂直居中。

示例代码如下：

<!DOCTYPE html>

    <head>

        <title>center</title>

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

        <style>

            .parent {

                width:50%;

                height:100px;

                border:1px solid black;

                position:relative;

            }

            .child {

                position:absolute;

                width:50px;

                height:50px;

                top:50%;

                left:50%;

                <!--渐进增强-->

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

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

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

                background:#22B14C;

            }

        </style>

    </head>

    <body>

        <div class="parent">

            <div class="child">

            </div>

        </div>

    </body>

</html>

方法三：

利用table-cell属性就可以轻松实现。

将父元素变为table-cell，从而可以使用table的属性vertical-align:middle，使元素垂直居中，再将子元素margin:0 atuo;就可以实现水平居中咯。

PS：table-cell必须包含在display:table元素中，table-cell是属于table滴嘛。

示例代码如下：

<!DOCTYPE html>

    <head>

        <title>center</title>

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

        <style>

            .root {

                width:50%;

                height:100px;

                border:1px solid black;

                display:table;

            }

            .parent {

                display:table-cell;

                vertical-align:middle;

            }

            .child {

                width:50px;

                height:50px;

                background:#22B14C;

                margin:0 auto;

            }

        </style>

    </head>

    <body>

        <div class="root">

            <div class="parent">

                 <div class="child"></div>

            </div>

        </div>

    </body>

</html>

好了，css之垂直水平居中就算完了(弹性布局Flex不在本篇讨论范畴)。

晚安，everyone~

CSS之水平垂直居中的更多相关文章

  1. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  2. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  4. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  5. 你知道CSS实现水平垂直居中的第10种方式吗？

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  6. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  8. css各种水平垂直居中

    css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...

  9. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

  10. CSS如何水平垂直居中？

    CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...

随机推荐

  1. 【WPF】WPF中的List<T>和ObservableCollection<T>

    在WPF中 控件绑定数据源时,数据源建议采用 ObservableCollection<T>集合 ObservableCollection<T> 类:表示一个动态数据集合,在添 ...

  2. java并发编程（十四）同步问题的内存可见性

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17288243 加锁(synchronized同步)的功能不仅仅局限于互斥行为,同时还存在另 ...

  3. initWithCoder与initWithFrame的区别

    1. initWithFrame方法是什么?   initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对象,也有initWithFrame方 ...

  4. Matlab 视频与图像之间的相互转换

    matlab版本是2015b,其中更新了部分函数库之前网上相关程序不适用于新版本,在此提供适用于新版本的程序: 帧序列转换为视频 function video = frames2video(frame ...

  5. 浅谈P2P金融

    自从李总理开发互联网大会,提出“互联网+”,好像与互联网相在的所有事情都火起来了.上至80岁的老头,下至十多岁的孩童,都知道了这个词“互联网+”.虽然大家可能对”互联网+“的概念都只是一支半解,但是像 ...

  6. java接口中定义成员变量

    //抽象类中可以定义如下成员变量:public abstract class People { public String name; public int age; public abstract ...

  7. 循序渐进做项目系列（5）：制作安装包，谁人都可以！——VS制作安装包简明教程

    一开始让我做安装包的时候,其实我是拒绝的.因为我根本就不会做安装包.查了资料之后,我很懵,很晕,很乱,因为不清晰,不简明,不直白.然而经过一番彷徨的挣扎,我终于发现:制作安装包,谁人都可以!故挥狼毫, ...

  8. 搭建 SVN 服务器

    安装.启动 SVN 服务器 在 Windows 下,可以使用以下命令将 SVN 服务注册到 windows 服务中去: sc create svnserver binPath= "drive ...

  9. .NET平台下对C3D文件的读写

    [题外话] 最近实验室要我修改C3D(The 3D Biomechanics Data Standard)文件,虽然从网上找到了一个叫c3d4sharp的类库,这个类库单纯读取C3D文件的话还可以,但 ...

  10. SQL Server 事务日志传输

    概述 可以使用日志传送将事务日志不间断地从一个数据库(主数据库)发送到另一个数据库(辅助数据库).不间断地备份主数据库中的事务日志,然后将它们复制并还原到辅助数据库,这将使辅助数据库与主数据库基本保持 ...