一、水平居中
- block元素的水平居中
如果block宽度写死了，采用：
.box{
margin: 0 auto;
}
如果block宽度没写死，那就：
.box{
margin: 0, 50px; /*给定左右外边距相等即可*/
}
- 行内元素（inline）的水平居中
采用text-align: center;（应用在inline元素的父容器）
二、垂直居中
- block元素的垂直居中
a. 采用上padding等于下padding(不要把父容器height写死)
b. 见下面的绝对居中。。。 - 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;
}
