CSS居中布局一、水平居中布局水平居中布局的html如下： 1、inline-block + text-align 将

一、水平居中布局

水平居中布局的html如下：

<div class="parent">
    <div class="child">DEMO</div>
</div>

将子元素的布局方式改成inline-block，或者子元素本来就是块级元素。父元素设置text-align为center即可实现居中布局。

.child{
    display: inline-block;
}
.parent{
    text-align: center;
}

注意：text-align属性是可以被继承下去的。因此不希望child里面的元素居中布局，需要设置child的text-align为left。

使用margin: 0 auto时需要注意，child的宽度是它本身的宽度。可以设置child的css为width: fit-content或者display: table；也可以设置parent的css为display: flex。

.child{
    margin: 0 auto;
    width: fit-content;
    // display: table;
}

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

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

垂直居中布局的html如下：

<div class="parent">
    <div class="child">DEMO</div>
</div>

设置父元素为表格单元格，然后设置垂直居中为middle即可。

.parent{
    display: table-cell;
    verticel-align: middle;
}

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

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

如果内容只是一行文本的话，可以设置文本的行高为容器的高度

<div class="container">DEMO</div>

.container{
    height: 32px;
    line-height: 32px;
}

居中布局的html如下：

<div class="parent">
    <div class="child">DEMO</div>
</div>

设置父元素为表格单元格，然后设置垂直居中为middle即可。

.parent{
    text-align: center;
    display: table-cell;
    verticel-align: middle;
}
.child {
    display: inline-block;
}

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.parent{
    display: flex;
    align-items: center;
    justify-content: center;
}