CSS布局 --- 居中布局

版权声明：欢迎转载，转载请注明出处 https://blog.csdn.net/Nate__River/article/details/82022563

网易云课堂学习笔记一：居中布局

水平居中

子盒子的宽度由内容决定

<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%);}