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

定义一个需要垂直居中的div元素，他的宽度和高度均为200px，背景色为原谅色。代码如下：

div{
  width: 200px;
  height: 200px;
  background-color: green;
}

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

div{
  width: 200px;
  height: 200px;
  margin:0 auto;/*水平居中*/
  background-color: green;
}

效果如下：

image.png

实现垂直居中之前，先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是由内容高度填充的），并且清除默认样式，即把margin和padding设置为0.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

接下来需要div往下移动,top属性可以使元素向下偏移。但是，由于默认情况下，元素在文档流里是从上往下、从左到右紧密的布局的，我们不可以直接通过top属性改变它的垂直偏移。这就需要使用position属性，设置它的值为relative，就可以通过top、bottom、right、left等属性使它在正常的文档流中发生位置偏移（注意，此时它在并没有脱离文档流，原来的位置还会占据着的！）。代码如下:

div{
 width: 200px;
 height: 200px;
 margin:0 auto;/*水平居中*/
 position: relative;/*可在文档流中偏移*/
 background-color: green;
}

刷新页面，发现没有任何变化的，因为还没开始移动div的垂直偏移。垂直偏移需要用到top属性，它的值可以是具体的像素，也可以是百分数。因为现在不知道父元素（即body）的具体高度，所以应该用百分数。既然要让它居中，就设置50%试一下：

div{
  width: 200px;
  height: 200px;
  margin:0 auto;  /*水平居中*/
  position: relative;   /*可在文档流中偏移*/
  top: 50%;
  background-color: green;
}

image.png

显然div在中间偏下半个div高度的地方，可以用margin-top:-半个div高度使其向上偏移。

div{
  width: 200px;
  height: 200px;
  background-color: green;
  margin:0 auto;  /*水平居中*/
  position: relative;   /*可在文档流中偏移*/
  top: 50%;/*偏移至父元素top50%*/
  margin-top: -100px;/*向上偏移100*/
}

完成！如图所示：

image.png

除了可以使用margin-top把div往上偏移，CSS3的transform属性也可以实现，设置div的transform: translateY(-50%)，可使div向上平移（translate）自身高度的一半(50%)。代码如下：

div{
  width: 200px;
  height: 200px;
  background-color: green;
  margin:0 auto;  /*水平居中*/
  position: relative;   /*可在文档流中偏移*/
  top: 50%;/*偏移至父元素top50%*/
  transform: translateY(-50%);/*向上偏移50%*/
}

使用Flex布局

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;/*定义body的元素垂直居中*/
  justify-content: center;/*定义body的里的元素水平居中*/
}
div{
  width: 200px;
  height: 200px;
  background:green;
}