參考：https://blog.csdn.net/weixin_37580235/article/details/82317240
一夸盟、水平居中
1.1 行內(nèi)元素
對(duì)于行內(nèi)元素，可以將父級(jí)元素設(shè)置為塊級(jí)元素，并給父元素設(shè)置 text-align: center;
<div id="father">
<span id="son">我是行內(nèi)元素，我要水平居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
height:100%;
background:pink;
text-align:center;
}
</style>
1.2 塊級(jí)元素
1.2.1 寬度固定(方案一)
需要給誰(shuí)居中纬向，就給誰(shuí)設(shè)定margin:0 auto; 不需要設(shè)置position也可實(shí)現(xiàn)。
<div id="father">
<div id="son">我是塊級(jí)元素汰现，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
height:100%;
background:pink;
}
#son{
background:skyblue;
width:300px;
height:200px;
margin:0 auto;
text-align:center;
}
</style>
1.2.2 寬度固定(方案二)
首先設(shè)置父元素為相對(duì)定位胶坠，再設(shè)置子元素為絕對(duì)定位觅廓，設(shè)置子元素的left:50%，即讓子元素的左上角水平居中涵但；
設(shè)置絕對(duì)子元素的 margin-left: -元素寬度的一半px; 或者設(shè)置transform: translateX(-50%);
<div id="father">
<div id="son">我是塊級(jí)元素杈绸，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
height:100%;
background:pink;
position:relative;
}
#son{
background:skyblue;
width:300px;
height:200px;
position:absolute;
left: 50%;
margin-left: -150px;
/*或者transform: translateX(-50%);*/
text-align:center;
}
</style>
1.2.3寬度不定(方案一)
首先設(shè)置父元素為相對(duì)定位，再設(shè)置子元素為絕對(duì)定位矮瘟，設(shè)置子元素的left:50%瞳脓，即讓子元素的左上角水平居中；
利用css3新增屬性transform: translateX(-50%);
<div id="father">
<div id="son">我是塊級(jí)元素澈侠，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
height:100%;
background:pink;
text-align:center;
position:relative;
}
#son{
background:skyblue;
position:absolute;
left:50%;
transform: translateX(-50%);
text-align:center;
}
</style>
1.2.4 寬度不定(方案二)
默認(rèn)子元素的寬度和父元素一樣劫侧，這時(shí)需要設(shè)置子元素為display: inline-block; 或 display: inline;即將其轉(zhuǎn)換成行內(nèi)塊級(jí)/行內(nèi)元素，再給父元素設(shè)置 text-align: center;
<div id="father">
<div id="son">我是塊級(jí)元素哨啃，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
height:100%;
background:pink;
text-align:center;
}
#son{
background:skyblue;
margin:0 auto;
text-align:center;
display:inline;
}
1.2.5寬度隨意
使用flexbox布局烧栋，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;
<div id="father">
<div id="son">我是塊級(jí)元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
height:100%;
background:pink;
display: flex;
justify-content: center;
}
#son{
background:skyblue;
text-align:center;
}
</style>
二拳球、垂直居中
2.1 行內(nèi)元素
2.1.1單行
只需要設(shè)置單行行內(nèi)元素的"行高等于盒子的高"即可审姓；
<div id="father">
<span id="son">我是單行行內(nèi)元素，我要垂直居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
height:200px;
background-color:pink;
line-height:200px;
}
#son{
background-color:skyblue;
}
</style>
效果圖：
2.1.2 多行
使用給父元素設(shè)置display:table;子元素設(shè)置：display:table-cell和vertical-align: middle;屬即可祝峻；
<div id="father">
<span id="son">我是多行行內(nèi)元素魔吐，我要垂直居中<br>我是多行行內(nèi)元素扎筒，我要垂直居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
height:100%;
background-color:pink;
display:table;
}
#son{
background-color:skyblue;
vertical-align:middle;
display: table-cell;
}
</style>
可以發(fā)現(xiàn)父元素的背景會(huì)一直被子元素遮住。所以在這里仍存疑酬姆。
2.2 塊狀元素
2.2.1固定高度(使用定位)
首先設(shè)置父元素為相對(duì)定位嗜桌，再設(shè)置子元素為絕對(duì)定位，設(shè)置子元素的top: 50%辞色，即讓子元素的左上角垂直居中骨宠。
設(shè)置絕對(duì)子元素的 margin-top: -元素高度的一半px; 或者設(shè)置transform: translateY(-50%);
<div id="father">
<div id="son">我是塊級(jí)元素，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
height: 100%;
background-color: pink;
position: relative;
}
#son {
height: 100px;
background-color: skyblue;
position: absolute;
top: 50%;
margin-top: -50px;
//transform: translateY(-50%)
}
</style>
2.2.2不定高度(使用定位)
首先設(shè)置父元素為相對(duì)定位相满，再設(shè)置子元素為絕對(duì)定位层亿，設(shè)置子元素的top: 50%，即讓子元素的左上角垂直居中雳灵。
設(shè)置絕對(duì)子元素transform: translateY(-50%);
<div id="father">
<div id="son">我是塊級(jí)元素棕所，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
height: 100%;
background-color: pink;
position: relative;
}
#son {
background-color: skyblue;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
</style>
2.2.3 高度隨意(使用flexbox布局)
使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;
<div id="father">
<div id="son">我是塊級(jí)元素悯辙，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
height: 100%;
background-color: pink;
display: flex;
align-items: center;
}
#son {
background-color: skyblue;
}
</style>
三琳省、水平垂直居中
3.1 塊級(jí)元素
3.1.1 寬高固定(方案一)
設(shè)置父元素為相對(duì)定位，給子元素設(shè)置絕對(duì)定位躲撰，再設(shè)置top: 0; right: 0; bottom: 0; left: 0; margin: auto;
<div id="father">
<div id="son">我是塊級(jí)元素针贬，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
height: 100%;
background-color: pink;
position:relative;
}
#son {
width:300px;
height:300px;
background-color: skyblue;
position:absolute;
top: 0; right: 0; bottom: 0; left: 0; margin: auto;
}
</style>
3.1.3 寬高固定(方案二)
設(shè)置父元素為相對(duì)定位，給子元素設(shè)置絕對(duì)定位拢蛋，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;
<div id="father">
<div id="son">我是塊級(jí)元素桦他，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
height: 100%;
background-color: pink;
position:relative;
}
#son {
width:300px;
height:300px;
background-color: skyblue;
position:absolute;
left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;
}
</style>
3.1.2 寬高不定
設(shè)置父元素為相對(duì)定位，給子元素設(shè)置絕對(duì)定位谆棱，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
<div id="father">
<div id="son">我是塊級(jí)元素快压，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
height: 100%;
background-color: pink;
position:relative;
}
#son {
background-color: skyblue;
position:absolute;
left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
}
</style>
3.1.4寬高隨意(使用flex布局)
設(shè)置父元素為flex定位，justify-content: center; align-items: center;
<div id="father">
<div id="son">我是塊級(jí)元素垃瞧，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
height: 100%;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
#son {
background-color: skyblue;
}
</style>
