居中問題是CSS中經(jīng)常遇到垮庐，但是居中方法之多寺惫。但哪種場景適用什么方法呢，一時叫人說起便讓人毫無頭緒，今天我就來總結(jié)一下所有類型的居中的問題褂傀。
一、水平居中
1遍烦、行內(nèi)元素（文字狭姨、鏈接）
此類居中，只要在在文字等元素包裹的父元素加上
text-align: center;
2狠轻、塊狀元素居中
此類要在有寬度的前提下奸例。設(shè)置左右margin為auto即可
div{
width:100px; //任意寬度
margin-left: auto;
margin-right: auto;
}
3、多個塊狀元素居中
此類大致有兩種思路可以實(shí)現(xiàn)
- 使用flex彈性盒子布局
<style>
*{
margin:0;
padding:0;
}
body{
padding:20px;
}
div{
border:1px solid #ccc;
}
.wrapper{
display: flex;
justify-content: center;
padding:20px;
}
.item{
margin:10px;
width:80px;
height:80px;
background:#ccc;
}
<body>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<style>
多塊狀-Flex水平居中
- 使得多個塊狀元素變?yōu)樾袃?nèi)元素向楼，然后外層包裹父容器查吊，使得轉(zhuǎn)化為單個塊狀元素的居中
<style>
*{
margin:0;
padding:0;
}
div{
border:1px solid #ccc;
}
.wrapper{
text-align:center;
padding:20px;
}
.item{
display:inline-block;
width:80px;
height:80px;
background:#ccc;
}
</style>
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
多塊狀-內(nèi)聯(lián)水平居中
二 、垂直居中問題
1蜜自、行內(nèi)元素（文字菩貌、鏈接）
①、單行內(nèi)容
有的時候文字本身就是垂直居中的重荠，因?yàn)槲淖稚舷路降膒adding設(shè)置的是相等的箭阶，若是沒有設(shè)置padding則可以使得line-height等于父容器的高度即可。
<style>
</style>
div{
height:100px;
padding:20px;
border:1px solid;
line-height:100px;
}
<div>
XXXXX
</div>
單行垂直居中
②戈鲁、多行居中
多行文字在表格中默認(rèn)就是垂直居中的仇参。利用這一特點(diǎn)可以設(shè)置父容器為display：table ，然后設(shè)置內(nèi)部元素為display: table-cell;
<style>
div{
border:1px solid #ccc;
width:250px;
height:300px;
display: table;
}
div p{
display: table-cell;
vertical-align: middle;
}
</style>
<div>
<p>sssss s ssssss s ss sssss sss ssssss sssssss ssssssssssssss</p>
</div>
表格垂直居中
由于table過于難于布局婆殿，因此我們可以使用flex布局诈乒，不過父容器的高度不能設(shè)置，有內(nèi)部元素的height決定整個容器的高度
<style>
div{
border:1px solid #ccc;
width:250px;
display: table;
}
div p{
display: flex;
justify-content: center;
flex-direction: column;
height: 250px;
}
</style>
flex垂直居中
如果上述兩種方法都不能實(shí)現(xiàn)婆芦，垂直居中還有一個奇淫巧計(jì)怕磨，使用偽類的方法達(dá)到垂直居中,可以使用偽類來創(chuàng)造一個空的元素喂饥，兩個vertical-align:middle的inline-block并排的話，高度小的那個會相對高的那個垂直居中排放
<style>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
text-align:center;
border:1px solid;
}
div p
{
width: 292px;
vertical-align:middle;
display: inline-block;
}
div:before{
content: " ";
display: inline-block;
height: 100%;
width:0;
vertical-align: middle;
}
</style>
<div >
<p>ssss ssss sss sss ssss sss ssssssssssss ssssss sss sss sss ss ss ss ss ss ss ss ss ss ss </p>
</div>
奇淫巧計(jì)
2肠鲫、塊狀元素
①员帮、知道元素高度
.parent { position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* 根據(jù)元素高度 */}
②、不知道元素高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
③导饲、flex布局
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
三捞高、垂直&水平 一同居中
1、固定寬高的元素
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2渣锦、寬高未知元素
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3硝岗、flex布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
