CSS佈局 --- 居中佈局

網易雲課堂學習筆記一：居中佈局

水平居中

子盒子的寬度由內容決定

<div class="sup">
	<div class="sub">我是子盒子</div>
</div>

1.text-align+inline-block

.sup {text-align: center;}
.sub {display: inline-block;}

2.table+margin

.sub {display: table;margin: 0px auto;}

3.flex+justify-content

.sup {display: flex;justify-content: center;}

4.relative+absolute

.sup {position: relative;}
.sub {position: absolute;left: 50%;transform: translateX(-50%);}

子盒子的寬度不由內容決定（以上四種均適用）

<div class="sup">
	<div class="sub"></div>
</div>

5.relative+absolute

.sup {position: relative;}
.sub {position: absolute;left: 20%;right: 20%;} //寬度自適應

6.block+margin

.sub {display: block;margin: 0px auto;}

垂直居中

子盒子的高度由內容決定

<div class="sup">
	<div class="sub">我是子盒子</div>
</div>

1.table-cell+vertical-align

.sup {display: table-cell;vertical-align: middle;}

2.flex+align-items

.sup {display: flex;align-items: center;}

3.relative+absolute

.sup {position: relative;}
.sub {position: absolute;top: 50%;transform: translateY(-50%);}