第一种方法：首先用margin：0 auto实现水平居中，然后设置position:relative，设置top为50%（父元素高度的50%），然后设置margin-top：-150px（设置负值是因为要向上移动div，150px是div的height），代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; margin: 0 auto; /*水平居中*/ position: relative; top: 50%; /*偏移*/ margin-top: -150px; } </style> </head> <body> <div class="content"></div> </body> </html>
实现效果如下：
因为div有了高度，可以给其指定overflow：auto，这样如果div中的内容太多的话，就会出现滚动条。该方法的有点在于可以不用那么多的嵌套标签，而且适用于所有的浏览器，缺点在于，如果浏览器窗口缩小到一定程度时，会div会消失
第二种方法：在上面的方法的基础上除了设置margin-top向上移动之外，还可以设置css3的transform属性也可以实现这个功能，通过设置div的transform:translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; 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>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>