在前端开发过程中，水平居中、垂直居中、水平垂直居中都很常见。本章来看看水平垂直居如何实现。
Ｄemo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content {
            width: 100px;
            height: 100px;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

效果：

CSS实现水平垂直居中的常用方法_水平垂直居中

水平居中

直接设置元素的margin: 0 auto即可。

CSS实现水平垂直居中的常用方法_水平垂直_02

垂直居中

垂直居中比较复杂一些。我们要明确我们的元素是要在屏幕居中，还是要在所在块元素（如div）中居中。我们要用到position定位。position默认是static的，除此之外，absolute、relative、fixed。垂直居中需要通过position定位来完成。

水平居中之所以只需要设置margin:0 auto就可以完成的主要原因是body的水平width是可知的。但是body的height默认是0，随内容自适应变化高度。即使设置height的值，也不会有效。因为它还是有很多情况无法确定。因此无法像水平居中那么容易设置居中。所以垂直居中只好参考包含块的左边、上边这些确定的地方做定位来实现居中。我们讨论position的absolute、relative、fixed三个不同的值来如何实现居中。

（１）fixed固定定位
使用fixed定位的块，它的参考对象是窗口（浏览器窗口）且只针对浏览器窗口的上下左右定位，不会随着窗口大小改变其位置（如果要让其改变可以将它的定位值，设成百分比形式），它的位置是固定不变的。常用于固定位置的小广告，常用于网站边缘的公司联系方式和快速回到顶部。
第一种方式：

.content {
    width: 100px;
    height: 100px;
    background: orange;
    position: fixed;
    top: 50%;
    margin-top: -50px;
}

如果不加margin-top: -50px，那么div的中心到窗口的垂直中心的距离是div自身高度的一半。所以div向上偏移div的高度的一半就可以了。因为div高度为100px,所以设置margin-top: -50px就可实现了。margin-top的值：正数是向下偏移，负数是向上偏移。

在CSS3的transform属性也可以实现向上偏移，通过设置div的transform: translateY(-50%)，就可以使得div向上平移（translate）自身高度的一半(50%)，如下面所示。
第二种方式：

.content {
    width: 100px;
    height: 100px;
    background: orange;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

效果如下：

CSS实现水平垂直居中的常用方法_水平垂直居中_03

水平垂直居中的样式：

.content {
            width: 100px;
            height: 100px;
            background: orange;
            position:fixed;
            top:50%;
            left:50%;
            margin-top:-50px;
            margin-left:-50px;
        }

或者：

.content {
            width: 100px;
            height: 100px;
            background: orange;
            position:fixed;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

效果：

CSS实现水平垂直居中的常用方法_水平垂直_04

absolute、relative的垂直居中

我们用一个新例子来做演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .content_top{
            width: 500px;
            height: 100px;
            background-color: green;
        }
        .content_outer{
            width: 500px;
            height: 500px;
            background-color: red;

        }
        .content {
            width: 100px;
            height: 100px;
            background: orange;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="content_top">div one</div>
    <div class="content_outer">
            <div class="content">
                content
            </div>
    </div>
</body>
</html>

效果

CSS实现水平垂直居中的常用方法_水平垂直_05

（1）absolute绝对定位
absolute绝对定位，不占据位置，会随着窗口大小与页面一起改变，脱离文档流意味着元素可以堆叠。position为absolute的元素或块的定位是参考离它最近的position为fixed或relative或absolute的父元素。如果找不到这样的父元素那它就会参考浏览器窗口定位（不是body元素哦！）。
水平垂直居中：

// 父元素的样式
 　　　　.content_outer{
            width: 500px;
            height: 500px;
            background-color: red;
            position:absolute;// 父元素的这个值可以是fixed、relative、absolute

        }
        // 需要居中的元素
        .content {
            width: 100px;
            height: 100px;
            background: orange;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-50px;
            margin-left:-50px;
        }

或者

// 父元素的样式
 　　　　.content_outer{
            width: 500px;
            height: 500px;
            background-color: red;
            position:absolute;// 父元素的这个值可以是fixed、relative、absolute

        }
        // 需要居中的元素
        .content {
            width: 100px;
            height: 100px;
            background: orange;
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }

效果

CSS实现水平垂直居中的常用方法_水平垂直居中_06


（2）relative相对定位

采取相对定位的元素，将相对于它原来的位置（即没有进行相对定位前），设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

水平垂直居中：

.content {
    width: 100px;
    height: 100px;
    background: orange;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

效果

CSS实现水平垂直居中的常用方法_居中_07

谢谢阅读