CSS如何水平垂直居中？

1、CSS如何实现水平居中？　　　　

margin: 0 auto

2、CSS如何实现水平垂直居中？

首先设置一个div元素，设置背景颜色以便看出变化。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS水平垂直居中</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

页面效果如下：

通过设置margin: 0 auto实现水平居中。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS水平垂直居中</title>
    <style>
        .content {
            width: 300px;
            height: 300px;
            background: blue;
            margin: 0 auto
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

页面效果如下：

如何实现垂直居中呢？

方法一：通过display:relative设置top、bottom、right、left等属性实现位置偏移

在这之前，我们先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是为0的），并且清除默认样式，即把margin和padding设置为0（如果不清除默认样式的话，浏览器就会出现滚动条）

通过设置position可以实现元素向不同方向的移动。在默认情况下（position：static; //静止的、不可以移动的）我们不可以直接设置top、bottom、right、left等属性使它在文档中发生位置偏移，需要设置position的值为relative,absolute,fixed等（relative是不会使元素脱离文档流的，元素在文档流里是从上往下、从左到右紧密的布局的。）实现位置偏移。

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS水平垂直居中</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: blue;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

页面效果如下：

这时，并没有居中，图片显示效果偏下，因为这里我们设置top：50%，所以我们设置的块状元素在页面中心位置开始向下分布，需要设置margin-top: -150px;150px是块状元素一半的高度。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS水平垂直居中</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: blue;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            margin-top: -150px; 
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

页面效果如下：

方法二：通过CSS3的transform属性

CSS3的transform属性也可以实现这个功能，通过设置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS水平垂直居中</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content {
            width: 300px;
            height: 300px;
            background: blue;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

页面效果如下：

方法三：使用CSS3的弹性布局（flex）

使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS水平垂直居中</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
         body {
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }
        .content {
            width: 300px;
            height: 300px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

页面效果如下：