方法 | 居中元素定寬高固定 |
---|---|
absolute + 負(fù)margin | 是 |
absolute + margin auto | 是 |
absolute + calc | 是 |
absolute + transform | no |
writing-mode | no |
lineheight | no |
table | no |
css-table | no |
flex | no |
grid | no |
公共代碼
/* 公共代碼 */
.parent{
border: 1px solid red;
width: 400px;
height: 400px;
}
.child{
background: green;
}
.child.size{
width: 200px;
height: 200px;
}
/* 公共代碼 */
absolute + 負(fù)margin
絕對定位的百分比是相對于父元素的寬高尼摹,通過這個特性可以讓子元素的居中顯示,但是絕對定位是基于子元素的左上角溅固,期望的效果是子元素的中心居中顯示跌榔,
為了解決這個問題,可以借助外邊距的負(fù)值另假,負(fù)的外邊距可以讓元素向相反方向定位,通過指定子元素的外邊距為子元素寬度一半的負(fù)值资铡,就可以讓子元素居中了电禀,代碼如下:
HTML代碼
<div class="parent">
<div class="child size">hhhhh</div>
</div>
/* 引用公共代碼 */
/* 定位代碼 */
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
缺點是需要知道子元素的寬高
absolute + margin auto
這種方式要求居中元素的寬高固定
這種方式通過設(shè)置各個方向的距離都是0,此時再將margin設(shè)置為auto笤休,就可以各個方向上居中
HTML代碼
<div class="parent">
<div class="child size">hhhhh</div>
</div>
CSS代碼如下:
/* 引用公共代碼 */
/* 定位代碼 */
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
缺點: 需要知道子元素的寬高
absolute + calc
CSS3有了計算屬性尖飞,top的百分比是基于元素的左上角,那么再減去寬度的一半就好了店雅,
HTML代碼
<div class="parent">
<div class="child size">hhhhh</div>
</div>
CSS代碼如下:
/* 引用公共代碼 */
/* 定位代碼 */
.parent{
position: relative;
}
.child{
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
依賴calc的兼容性政基,缺點是需要知道子元素的寬高
<span id="at"></span>
absolute + transform
還是絕對定位,但不需要子元素固定寬高闹啦,所以不需要size類
HTML:
<div class="parent">
<div class="child">hhh</div>
</div>
修復(fù)絕對定位的問題沮明,可以使用css3新增的transform,transform的translate屬性可以設(shè)置百分比窍奋,相對于自身的寬和高荐健,講translate設(shè)置為50%,就可以居中了
CSS:
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
writing-mode
writing-mode可以改變文字的顯示方向琳袄,
HTML:
<div class="child1">水平方向</div>
<div class="child2">垂直方向</div>
CSS:
.child2{
writing-mode: vertical-lr;
}
顯示效果:
水平方向
垂
直
方
向
所有水平方向上的CSS屬性江场,都會變?yōu)榇怪毕蛏系膶傩裕热?=text-align==窖逗,通過==writing-mode==和==text-align==就可以做到水平和垂直方向居中
HTML:
<div class="parent">'
<div class="parent-inner">
<div class="child">hhhh</div>
</div>
</div>
CSS:
.parent{
writing-mode: vertical-lr;
text-align: center;
}
.parent-inner{
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.child{
display: inline-block;
margin: auto;
text-align: left;
}
lineheight
利用行內(nèi)元素居中屬性可以做到水平垂直居中址否,
HTML:
<div class="parent">
<div class="child">hhhhh</div>
</div>
把child設(shè)置為行內(nèi)元素,通過==text-align==就可以做到水平居中碎紊,還可以通過==vertical-align==在垂直方向做到居中
CSS:
.parent{
line-height: 400px;
text-align: center;
font-size: 0px;
}
.child{
font-size: 16px;
display: inline-block;]
vertical-align: middle;
line-height: initial;
text-align: left;
}
table
table DEMO
table也能實現(xiàn)水平垂直居中佑附,但會增加很多冗余代碼
HTML:
<table>
<tbody>
<tr>
<td class="parent">
<div class="child">hhhhh</div>
</td>
</tr>
</tbody>
</table>
CSS:
.parent{
text-align: center;
}
.child{
display: inline-block;
}
代碼太冗余,而且不是table的正確用法
css-table
css新增的table屬性仗考,可以讓我們把普通元素帮匾,變?yōu)閠able元素的顯示效果,通過這個特性也可以實現(xiàn)水平垂直居中
HTML:
<div class="parent">
<div class="child">hhhhhh</div>
</div>
通過CSS屬性痴鳄,可以讓div顯示得和table一樣
CSS:
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
flex
flex一個現(xiàn)代的布局方案,幾行代碼就可以水平垂直居中了
HTML:
<div class="parent">
<div class="child">hhhhhh</div>
</div>
CSS:
.parent{
display: flex;
justify-content: center;
align-items: center;
}
grid
css新出的網(wǎng)格布局缸夹,直接上代碼痪寻,
HTML:
<div class="parent">
<div class="child">hhhhhh</div>
</div>
CSS:
.parent{
display: grid;
}
.child{
align-self: center;
justify-self: center;
}
總結(jié)
- PC端有兼容性要求,寬高固定虽惭,推薦absolute + 負(fù)margin
- PC端有兼容要求橡类,寬高不固定,推薦css-table
- PC端無兼容性要求芽唇,推薦flex
- 移動端推薦使用flex