CSS水平居中与垂直居中的方法

一、水平居中

将左右边距margin设置为auto，可将已设置width的块级元素水平居中。对于非块级元素，可先通过设置"display:block"将其转换为块级元素。
注意：一般，块级元素的默认宽度是其父级元素宽度的100%，<table>元素例外，默认随内容调整宽度。

div｛
    width:200px;    
    //display:block;   // 非块级元素
    margin: 0 auto; 
｝

另外，如：<div>Hello,world</div>

虽然<div>元素实现了居中，但里面的文字没有居中。
若此时需要文字也居中，可添加"text-align:center"。

二、水平垂直居中

1、通过绝对定位实现垂直居中

div {
    position:absolute;   
    width:100px;
    height:80px;
    left:50%;      // 将div左上角居中
    top:50%;     
    margin-left: -50px;  // 通过将左外边距和上外边距分别设置为-width/2、-height/2，将div的中心点移动到左上角的位置，实现居中。
    margin-top:-40px;
}

注意：绝对定位的元素位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么其位置相对于最初的包含块。

2、或者使用下面的方式

div{
  width: 300px;
  height: 300px;
  margin: auto;      
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;      
}

注意：一定要设定width和height，因为在设置left、top、right、bottom为0后，width、height将与浏览器视口大小一致。

3、利用CSS3实现居中效果更为简单
tranform方式：

div{
  width:200px;
  height:100px;
  position: absolute;
  top: 50%;         // 实现div左上角居中
  left: 50%;  
  transform: translate(-50%, -50%);  //将元素向左和向上移动分别移动其宽度和高度的一半，就实现了div中心点居中
}

4、fixed定位居中
将以上方法中的absolute定位换成fixed定位后，实现的是视窗水平垂直居中。
即，当窗口有滚动条时，无论怎么移动滚动条，缩放窗口，元素都会固定在中心不动。
而absolute定位时，只有将滚动条移动到最左、最上时，元素才会居中于窗口，此时缩放窗口，元素也会一致在中心。

5、flex弹性布局：

.container {  
  display: flex;
  justify-content: center;
  align-items: center;
}

注意：当flex容器元素宽度/高度大于视窗，出现滚动条时，flex项目不一定视窗的中心。它是在flex容器的中心位置。