| 方法 | 居中元素定寬高固定 |
|---|---|
| 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
