前言
在CSS布局中，水平居中與垂直居中一直是用到比較多的，在本篇中將介紹水平居中、垂直居中的幾種方式。
示例
HTML：
<div class="parent">
<div class="child"></div>
</div>
CSS：
.parent {
width: 200px;
height: 100px;
position: relative;
background-color: #374858;
}
.parent .child {
width: 100px;
height: 50px;
background-color: #9dc3e6;
}
效果：
1. 水平居中
這里將分別介紹當子元素的樣式為內聯、塊級以及絕對定位時的水平居中布局方案。
1.1 子元素為內聯樣式
說明：當子元素為內聯樣式時(display: inline-block | inline-flex | inline-grid | inline-table 也含有內聯樣式特性)，只需要設置父元素的text-align: center。
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
text-align: center;
}
.parent .child {
display: inline-block;
}
1.2 子元素為塊級樣式
說明：父元素和子元素都是塊級元素時，設置子元素的margin: 0 auto即可。
注意：此時的子元素需要設置width。
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {}
.parent .child {
display: block;
margin: 0 auto;
}
1.3 子元素 position: absolute
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {}
.parent .child {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
1.4 父元素 display: flex
說明：此時子元素可為內聯、塊級元素。
瀏覽器支持：IE 11。
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
display: flex;
justify-content: center;
}
.child {
display: inline;
margin: 0 auto;
}
2. 垂直居中
同水平居中一樣，這里也將分別介紹當子元素的樣式為內聯、塊級以及絕對定位時的垂直居中布局方案。
2.1 子元素為塊級元素
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
display: table-cell;
vertical-align: middle;
}
.parent .child {
display: block;
}
2.2 子元素 position: absolute
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {}
.parent .child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
2.3 父元素 display: flex
說明：此時子元素可為內聯、塊級元素
瀏覽器支持：IE 11。
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
display: flex;
align-items: center;
}
.parent .child {
display: inline;
}
3. 水平居中+垂直居中
3.1 子元素 display: inline-block
說明：設置子元素的display: inline-block。
注意：此時的子元素需要設置width和height。
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.parent .child {
display: inline-block;
}
3.2 子元素 position: absolute
說明：此時的子元素為絕對定位。
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
position: relative;
}
.parent .child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
3.3 父元素 display: flex
瀏覽器支持：IE 11。
CSS：
.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.parent .child {}