原文鏈接：https://blog.csdn.net/weixin_37580235/article/details/82317240
水平居中
行內(nèi)元素
首先看它的父元素是不是塊級(jí)元素熟呛，如果是益咬，則直接給父元素設(shè)置 text-align: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
</style>
<div id="father">
<span id="son">我是行內(nèi)元素</span>
</div>
如果不是签财，則先將其父元素設(shè)置為塊級(jí)元素未蝌，再給父元素設(shè)置 text-align: center;
<style>
#father {
display: block;
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
</style>
<span id="father">
<span id="son">我是行內(nèi)元素</span>
</span>
效果：
塊級(jí)元素
方案一：(分寬度定不定兩種情況)
定寬度：需要誰(shuí)居中，給其設(shè)置 margin: 0 auto; （作用：使盒子自己居中）
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
}
#son {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
不定寬度：默認(rèn)子元素的寬度和父元素一樣，這時(shí)需要設(shè)置子元素為display: inline-block; 或 display: inline;即將其轉(zhuǎn)換成行內(nèi)塊級(jí)/行內(nèi)元素，給父元素設(shè)置 text-align: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
#son {
background-color: green;
display: inline;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：（將#son轉(zhuǎn)換成行內(nèi)元素要尔，內(nèi)容的高度撐起了#son的高度，設(shè)置高度無(wú)用）
方案二：使用定位屬性
首先設(shè)置父元素為相對(duì)定位新娜，再設(shè)置子元素為絕對(duì)定位赵辕，設(shè)置子元素的left:50%，即讓子元素的左上角水平居中概龄；
定寬度：設(shè)置絕對(duì)子元素的 margin-left: -元素寬度的一半px; 或者設(shè)置transform: translateX(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -50px;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
不定寬度：利用css3新增屬性transform: translateX(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
height: 100px;
background-color: green;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
方案三：使用flexbox布局實(shí)現(xiàn)（寬度定不定都可以）
使用flexbox布局还惠，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
}
#son {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
垂直居中
單行的行內(nèi)元素
只需要設(shè)置單行行內(nèi)元素的"行高等于盒子的高"即可；
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
}
#son {
background-color: green;
height: 300px;
}
</style>
<div id="father">
<span id="son">我是單行的行內(nèi)元素</span>
</div>
效果：
多行的行內(nèi)元素
使用給父元素設(shè)置display:table-cell;和vertical-align: middle;屬即可旁钧；
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: table-cell;
vertical-align:middle;
}
#son {
background-color: green;
}
</style>
<div id="father">
<span id="son">我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素</span>
</div>
效果：
塊級(jí)元素
方案一：使用定位
首先設(shè)置父元素為相對(duì)定位，再設(shè)置子元素為絕對(duì)定位互拾，設(shè)置子元素的top: 50%歪今，即讓子元素的左上角垂直居中；
定高度：設(shè)置絕對(duì)子元素的 margin-top: -元素高度的一半px; 或者設(shè)置transform: translateY(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
height: 100px;
background-color: green;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
不定高度：利用css3新增屬性transform: translateY(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
background-color: green;
position: absolute;
left: 50%;
transform: translateY(-50%);
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
方案二：使用flexbox布局實(shí)現(xiàn)（高度定不定都可以）
使用flexbox布局颜矿，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
align-items: center;
}
#son {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
水平垂直居中
已知高度和寬度的元素
方案一：設(shè)置父元素為相對(duì)定位寄猩，給子元素設(shè)置絕對(duì)定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
方案二：設(shè)置父元素為相對(duì)定位骑疆，給子元素設(shè)置絕對(duì)定位田篇，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
未知高度和寬度的元素
方案一：使用定位屬性
設(shè)置父元素為相對(duì)定位，給子元素設(shè)置絕對(duì)定位箍铭，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
方案二：使用flex布局實(shí)現(xiàn)
設(shè)置父元素為flex定位泊柬，justify-content: center; align-items: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
#son {
background-color: green;
}
</style>
<div id="father">
<div id="son">我是塊級(jí)元素</div>
</div>
效果：
