目錄
水平居中
1.行內(nèi)元素
2.塊級元素
方案一：(分寬度定不定兩種情況)
方案二：使用定位屬性
方案三：使用flexbox布局實現(xiàn)（寬度定不定都可以）
垂直居中
1.單行的行內(nèi)元素
2.多行的行內(nèi)元素
3.塊級元素
水平垂直居中
1.已知高度和寬度的元素
2.未知高度和寬度的元素
方案一：使用定位屬性
方案二：使用flex布局實現(xiàn)
————————————————
水平居中
1.行內(nèi)元素
首先看它的父元素是不是塊級元素狗超，如果是捡偏，則直接給父元素設(shè)置 text-align: center;
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
text-align: center;
}
</style>
<div class="father">
<div class="son">我是行內(nèi)元素</div>
</div>
如果他的父元素不是塊級元素就要給父元素設(shè)置成塊元素清寇，然后在給父元素設(shè)置text-align:center;
<style>
.father {
display:block;
width:300px;
height:300px;
background-color: skyblue;
text-align: center;
}
</style>
<div class="father">
<div class="son">我是行內(nèi)元素</div>
</div>
效果：
2.塊級元素
方案一：是否定寬度兩種方案：
定寬度：需要誰居中，給其設(shè)置 margin: 0 auto; （作用：使盒子自己居中）
<style>
.father {
width:300px;
height:300px;
background: skyblue;
}
.son {
width:100px;
height:100px;
background:red;
margin:0 auto;
}
</style>
<div class="father">
<div class="son">我是行內(nèi)元素</div>
</div>
效果：
不定寬：默認(rèn)子元素的寬度和父元素一樣复唤，這時需要設(shè)置子元素為display: inline-block; 或 display: inline;即將其轉(zhuǎn)換成行內(nèi)塊級/行內(nèi)元素，給父元素設(shè)置 text-align: center;
<style>
.father {
width:300px;
height:300px;
background: skyblue;
text-align: center;
}
.son {
display:inline;
background:red;
}
</style>
<div class="father">
<div class="son">我是行內(nèi)元素</div>
</div>
效果：（將#son轉(zhuǎn)換成行內(nèi)元素，內(nèi)容的高度撐起了#son的高度倡蝙，設(shè)置高度無用）
方案二：使用定位屬性
首先設(shè)置父元素為相對定位，再設(shè)置子元素為絕對定位绞佩，設(shè)置子元素的left:50%寺鸥，即讓子元素的左上角水平居中；
定寬度：設(shè)置絕對子元素的 margin-left: -元素寬度的一半px; 或者設(shè)置transform: translateX(-50%);
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
position:relative;
}
.son {
width:100px;
height:100px;
background: pink;
position:absolute;
left:50%;
margin-left:-50px;
}
</style>
<div class="father">
<div class="son">我是塊級元素</div>
</div>
不定寬度：利用css3新增屬性transform: translateX(-50%);
效果：
方案三：使用flexbox布局實現(xiàn)（寬度定不定都可以）
使用flexbox布局品山，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
display:flex;
justify-content: center;
}
.son {
width:100px;
height:100px;
background: pink;
}
</style>
<div class="father">
<div class="son">我是塊級元素</div>
</div>
垂直居中
1.單行的行內(nèi)元素
只需要設(shè)置單行行內(nèi)元素的"行高等于盒子的高"即可胆建；
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
}
.son {
line-height: 300px;
background: pink;
}
</style>
<div class="father">
<span class="son">我是塊級元素</span>
</div>
效果：
2.多行的行內(nèi)元素
使用給父元素設(shè)置display:table-cell;和vertical-align: middle;屬即可；
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
display:table-cell;
vertical-align:middle;
}
.son {
background: pink;
}
</style>
<div class="father">
<span class="son">我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素我是多行的行內(nèi)元素</span>
</div>
效果：
