CSS居中小结

一、水平居中

1. block元素的水平居中
   如果block宽度写死了，采用：

.box{
  margin: 0 auto;
}

如果block宽度没写死，那就：

.box{
 margin: 0, 50px; /*给定左右外边距相等即可*/
}

2. 行内元素（inline）的水平居中
   采用text-align: center;（应用在inline元素的父容器）

二、垂直居中

1. block元素的垂直居中
   a. 采用上padding等于下padding(不要把父容器height写死)
   b. 见下面的绝对居中。。。
2. inline元素的垂直居中
   a. 采用height和line-height相等（比如小按钮中的文本）
   b. 采用vertical-align: middle;（作用在行内元素或者表格）
   c. 采用display： table-cell；再用：vertical-align: middle;(由于改变了元素属性，可能会带来影响，table-cell和middle是应用在父容器上不是居中元素上)

三、绝对居中（水平和垂直）

1. position

第一种

.parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child {position: absolute;
    left: 50%;/*父容器的宽度的一半*/
    top: 50%;/*父容器的宽度的一半*/
    width: 30%;
    height: 20%;
    transfrom: translate(-50%,-50%);/*CSS3属性，自身宽、高的一半*/
}

第二种

.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

2. table

table标签是自带居中的

<table class="parent">
  <tr>
    <td class="child">我就是要居中</td>
  </tr>
</table>

.parent{
  border: 1px solid red;
  height: 600px;
}

.child{
  border: 1px solid green;
}

3. flex

.parent{
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}