目錄
- 水平居中
- 垂直居中
- 水平垂直居
一、水平居中
內(nèi)聯(lián)元素和塊級元素實(shí)現(xiàn)水平居中的方法不一樣，其中塊級元素又分定寬和不定寬兩種情況
- 內(nèi)聯(lián)元素水平居中
父元素為塊級元素，在父元素設(shè)置 text-align: center; 即可
代碼：
<!-- HTML--->
<div class="container">
<p>我是內(nèi)聯(lián)元素</p>
</div>
<!-- CSS -->
<style>
.container{
width: 100%;
height: 100px;
background-color: darkseagreen;
/* 父元素是塊級元素，直接設(shè)置text-align屬性 */
text-align: center;
}
</style>
效果：
image.png
- 塊級元素水平居中（定寬）
塊級定寬，誰居中誰 margin: 0 auto;
代碼：
<!-- HTML -->
<div class="container">
<div class="first_box"></div>
</div>
<!-- CSS -->
<style>
.container{
width: 100%;
height: 100px;
background-color: darkseagreen;
}
.first_box{
width: 50px;
height: 50px;
background-color: rosybrown;
/* 塊級定寬，誰居中誰margin: 0 auto; */
margin: 0 auto;
}
</style>
效果：
image.png
- 塊級元素水平居中（不定寬）
塊級不定寬，子元素設(shè)display: inline;，父元素設(shè)text-align: center;
代碼：
<!-- HTML -->
<div class="container">
<div class="second_box">我是不定寬的塊級元素</div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 100px;
background-color: darkseagreen;
text-align: center;
}
.second_box{
background-color: rosybrown;
display: inline;
}
</style>
效果：
image.png
- 使用定位屬性實(shí)現(xiàn)水平居中
父元素設(shè)置position: relative;，子元素設(shè)置position: absolute;、left: 50%;、margin-left: -元素寬度一半
代碼：
<!-- HTML -->
<div class="container1">
<div class="third_box"></div>
</div>
<!-- CSS -->
<style>
.container1{
width: 500px;
height: 100px;
background-color: darkseagreen;
position: relative;
}
.third_box{
width: 50px;
height: 50px;
background-color: rosybrown;
position: absolute;
left: 50%;
margin-left: -25px;
}
</style>
效果
image.png
- 使用flex布局實(shí)現(xiàn)水平居中
只需在父元素設(shè)置display: flex;、justify-content: center;
代碼：
<!-- HTML -->
<div class="container2" >
<div></div>
</div>
<!-- CSS -->
<style>
.container2{
width: 500px;
height: 100px;
background-color: darkseagreen;
display: flex;
justify-content: center;
}
.container2 div{
width: 50px;
height: 50px;
background-color: rosybrown;
}
</style>
效果：
image.png
flex布局詳見阮一峰的flex布局教程 語法篇
二、垂直居中
實(shí)現(xiàn)垂直居中，亦分內(nèi)聯(lián)元素和塊級元素，其中塊級元素同分定高和不定高兩種情況
- 內(nèi)聯(lián)元素垂直居中
單行元素，僅需設(shè)置很高等于盒子高即可；若為多行元素，則需給父元素設(shè)置display: table-cell;、vertical-align: middle;
單行代碼：
<!-- HTML -->
<div class="container">
<p>單行行內(nèi)元素</p>
</div>
<!--CSS-->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
}
.container p{
line-height: 200px;
}
</style>
效果：
image.png
多行代碼：
<!-- HTML -->
<div class="container">
<p>我是多行行內(nèi)元素我是多行行內(nèi)元素我是多行行內(nèi)元素我是多行行內(nèi)
元素我是多行行內(nèi)元素我是多行行內(nèi)元素我是多行行內(nèi)元素我是多行行內(nèi)元素我是多行行內(nèi)元素</p>
</div>
<!--CSS-->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
display: table-cell;
vertical-align: middle;
}
</style>
效果：
image.png
- 塊級元素垂直居中（定高）
定寬時(shí)，使用定位實(shí)現(xiàn)垂直居中。父元素設(shè)置position: relative;，子元素設(shè)置display:absolute;、left: 50%;、margin-top: -一半高度
代碼：
<!-- HTML -->
<div class="container">
<div></div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
position: relative;
}
.container div{
width: 50px;
height: 50px;
background-color: rosybrown;
position: absolute;
top: 50%;
margin-top: -25px;
}
</style>
效果：
image.png
- 塊級元素居中（不定高）
不定高時(shí)，需要使用到 transform: translateY(-50%);
代碼：
<!-- HTML -->
<div class="container">
<div>不定高度</div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
position: relative;
}
.container div{
width: 50px;
background-color: rosybrown;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
效果：
image.png
- 使用flex實(shí)現(xiàn)垂直居中
代碼：
<!-- HTML -->
<div class="container">
<div>不定高度</div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
display: flex;
align-items: center;
}
.container div{
width: 50px;
background-color: rosybrown;
}
</style>
效果：
image.png
flex布局詳見阮一峰的flex布局教程 語法篇
三、水平垂直居中
- 利用定位實(shí)現(xiàn)水平垂直居中
父元素設(shè)置position: relative;，子元素設(shè)置position: absolute;
代碼：
<!-- HTML -->
<div class="container">
<div></div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
position: relative;
}
.container div{
width: 50px;
height: 50px;
background-color: rosybrown;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
效果：
- 利用flexbox實(shí)現(xiàn)水平垂直居中
父元素設(shè)置position: relative;，子元素設(shè)置position: absolute;
代碼：
<!-- HTML -->
<div class="container">
<div></div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
display: flex;
justify-content: center;
align-items: center;
}
.container div{
width: 50px;
height: 50px;
background-color: rosybrown;
}
</style>
效果：
