CSS实现水平垂直居中

一、定义一个盒子，并实现水平居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>实现垂直居中</title>
 6     <style>
 7         .content{
 8             width: 200px;
 9             height: 200px;
10             background-color: goldenrod;
11             /* 实现水平居中 */
12             margin: 0 auto;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="content"></div>
18 </body>
19 </html>

二、实现垂直居中

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

　　2、接下来就是让div下移，将position设置为relative，这样就可以用top属性来偏移元素了。由于不知道父元素（body）的具体高度，所以选择用百分数来偏移元素，即设置top：50%；

　　3、最后设置margin-top：-100px，至此，完成对div元素的垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现垂直居中</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .content{
            width: 200px;
            height: 200px;
            background-color: goldenrod;
            /* 实现水平居中 */
            margin: 0 auto;
            /* 实现垂直居中 */
            position: relative;
            top: 50%;
            margin-top: -100px; 
        }
    </style>
</head>
<body>
    <div class="content"></div>
</body>
</html>

三、上面的两种方法，我们都是基于设置div的top值为50%之后，再进行调整垂偏移量来实现居中的。如果使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可。具体代码如下，对代码不做过多的解释，如果想了解弹性布局的可以看阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</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: orange;
        }
    </style>
</head>
<body>
<div class="content"></div>
</body>
</html>