文章轉(zhuǎn)自： https://ydmgirls.com/posts/e4lf3n
一、水平居中
1. 內(nèi)聯(lián)元素
如果想設(shè)置內(nèi)聯(lián)元素居中解藻，僅需在內(nèi)聯(lián)元素的外層添加一個塊級父元素肛宋，然后設(shè)置：
<div class="center-children">
<a>我是內(nèi)聯(lián)元素讨衣，我要水平居中哦黎休！</a>
</div>
.center-children {
text-align: center;
}
2.塊級元素
如果設(shè)置塊級元素居中，要將塊級元素的 margin-left 和 margin-right 屬性設(shè)置成auto陶耍，并且塊級元素一定要設(shè)置寬度奋蔚，否則元素默認為100%寬度，不需要居中烈钞。
<div class="center-me">
我是塊級元素泊碑，我要水平居中
</div>
.center-me {
width:200px;
margin: 0 auto;
}
3.兩個以上塊級元素
如果想把兩個以上塊級元素居中，我們要將子元素設(shè)置成內(nèi)聯(lián)元素
方法1
<div class="wrapper">
<div>
我想水平居中
</div>
<div>
我想水平居中
</div>
<div>
我想水平居中
</div>
</div>
.wrapper{
text-align:center;
}
.wrapper div{
display:inline-block;
background-color:#000;
color:#fff;
}
方法2 使用 flexbox
<div class="wrapper">
<div>
我想水平居中
</div>
<div>
我想水平居中
</div>
<div>
我想水平居中
</div>
</div>
.wrapper{
display:flex;
justify-content:center;
}
.wrapper div{
background-color:#000;
color:#fff;
margin-left:10px;
}
二毯欣、垂直居中
1.內(nèi)聯(lián)元素
方法1
<div class="wrapper">
我要垂直居中
</div>
.wrapper{
background-color:#000;
padding:40px 40px;
color:#fff;
}
方法2
<div class="wrapper">
我要垂直居中
</div>
.wrapper{
background-color:#000;
color:#fff;
height:100px;
line-height:100px;
}
方法3 設(shè)置padding可以可以實現(xiàn)多行內(nèi)容居中馒过，我們也可以通過設(shè)置display:table來垂直居中多行內(nèi)容
<div class="wrapper">
<p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
</div>
.wrapper{
display:table;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div{
display:table-cell;
vertical-align:middle;
}
方法4使用flexbox(父級元素要設(shè)置高度哦)
<div class="wrapper">
<p>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</p>
</div>
.wrapper{
display:flex;
background-color:#000;
color:#fff;
width:200px;
height:200px;
flex-direction: column;
justify-content: center;
}
2.塊級元素
方法1 元素寬度高度固定
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
position:relative;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div {
position: absolute;
background-color:red;
top: 50%;
left: 20px;
right: 20px;
height: 100px;
margin-top: -70px;
background: black;
color: white;
padding: 20px;
}
方法2 元素寬度高度不固定
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
position:relative;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div {
position: absolute;
top: 50%;
transform:translateY(-50%);
background-color:red;
}
方法3 使用 flexbox
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a我要垂直居中啊a</div>
</div>
.wrapper{
display:flex;
background-color:#000;
color:#fff;
width:200px;
height:200px;
flex-direction: column;
justify-content: center;
}
三、水平和垂直居中
方法1 元素寬度高度固定
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
position:relative;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div {
position: absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
background-color:red;
}
方法2 元素寬度高度不固定
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
position:relative;
background-color:#000;
color:#fff;
width:200px;
height:200px;
}
.wrapper div {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:red;
}
方法3 使用 flexbox
<div class="wrapper">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>
.wrapper{
display:flex;
background-color:#000;
color:#fff;
width:200px;
height:200px;
justify-content:center;
align-items: center;
}
.wrapper div {
width:100px;
height:100px;
background-color:red;
}
四酗钞、總結(jié)
以上就是 CSS 的各種居中方式啦腹忽，要靈活使用哦！
對學習抱有熱情的開發(fā)小伙伴歡迎加入 qq群685421881砚作，群主女孩留凭，更歡迎熱愛編程的妹子進入，讓我們一起學習 并進步吧偎巢！
