持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

前言

项目中经常需要让元素居中展示，今天就总结一下让元素居中的几种方式

水平居中

行内元素

对于行内元素（例如a，span），水平居中可以使用text-alian:center

我们创建一个200*200的div，在里面放一个span标签，我们想让span标签居中，就可以用text-alian:center

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: center;
}
<div class="box">
    <span>你好啊</span>
</div>

块级元素

已知宽度

margin

当宽度已知时，可以使用margin：0 auto 来实现水平居中

.box {
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    width: 100px;
    height: 10px;
    background-color: blue;
    margin: 0 auto;
}
<div class="box">
    <div class="demo"></div>
</div>

这样蓝色的div就在红色的里面水平居中了

position

我们还可以用定位来做，给父元素relative，子元素一个absolute，然后让子元素margin-left：（父元素width-子元素width）/2

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    position: absolute;
    width: 100px;
    height: 10px;
    background-color: blue;
    margin-left: 50px;
}

宽度未知

table

使用display：table，然后margin：0 auto 就可以实现水平居中

position+transfrom

先用定位，让他left移动父元素的50%，然后再用transfrom移动自身的-50%

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    position: absolute;
    left: 100px;
    transform: translateX(-50%);
    background-color: blue;
}

flex布局

直接使用justify-centent：center

.box {
    display: flex;
    width: 200px;
    height: 200px;
    justify-content: center;
    background-color: red;
}
.demo {
    background-color: blue;
}

因为没有给子元素height属性，所以继承了父元素

行内块

还可以转化成行内块元素，使用text-alien：center，就不演示了

垂直居中

line-height

如果是文字类的我们可以设置行高=元素的高度，来实现垂直居中

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    line-height: 200px;
}
<div class="box">你好啊</div>

position

margin

父元素相对定位，子元素绝对定位，使用margin进行垂直居中

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    width: 100px;
    height: 100px;
    position: absolute;
    margin-top: 50px;
    background-color: blue;
}

margin-top: 50px;这个是（父元素height-子元素height）/2的值

transfrom

还可以用position+transfrom，只需要子元素top：50%，translateY：-50%就可以

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: blue;
}

同样的效果

flex布局

还可以给父元素dispaly：flex，alien-item：center

.box {
    display: flex;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    width: 100px;
    height: 100px;
    background-color: blue;
}

同样可以实现垂直居中

table

把父元素转化成表格display：table，子元素vertical-align：middle，但是要注意子元素需要时内联元素或者用display：table-cell转化，才能使用

.box {
    display: table;
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background-color: blue;
}

水平垂直居中

分享了水平和垂直居中的方法，那么如何同时水平垂直居中呢

position

父元素相对定位，子元素绝对定位，同时让子元素left，top移动50%。transfrom：translate（-50%，-50%）来实现

.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: blue;
}

flex布局

父元素display：flex，然后justify-content: center，alien-items：center。可以实现

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: red;
}
.demo {
    width: 100px;
    height: 100px;
    background-color: blue;
}

文字类

文字类的采用text-alien和line-height最简单

 .box {
    line-height: 200px;
    text-align: center;
    width: 200px;
    height: 200px;
    background-color: red;
}
<div class="box">666</div>

结束

大家还有好的方法欢迎提出来啊，面试会问的，加油