一、定义一个盒子，并实现水平居中
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>