1 居中文本

• 居中文本一般用于块级元素。如div
• 如果需要行内元素（如span）居中文本，那么需要将其设置display: block

1.1 居中单行文本

见“居中多行文本”。见1.2

1.2 居中多行文本

同时适用于“居中单行文本”

1.2.1 text-align: center

• 块级元素

<div style="text-align: center; background-color: #F2C679;">
    水平居中<br />水平居中水平居中水平居中<br />水平居中水平居中
</div>

效果

• 行内元素 display: block;

<span style="display: block; text-align: center; background-color: #F2C679;">
    水平居中<br />水平居中水平居中水平居中<br />水平居中水平居中
</span>

效果

2 居中自身

2.1 指定width + margin: 0 auto;

<div style="width: 30%; margin: 0 auto; background-color: #F2C679;">
    水平居中
</div>

效果

2.2 display: table + margin: 0 auto

容器width由内部innerHTML确定

<div style="display: table; margin: 0 auto; background-color: #F2C679;">
    水平居中
</div>

效果

3 居中子元素

3.1 单个子元素

3.1.1 （父）display: flex + （子）margin: 0 auto

<div style="display: flex; background-color: #F2C679;">
    <div style="width: 200px; margin: 0 auto; background-color: #e8952e">水平居中</div>
</div>

效果

3.1.2 （父）position: relative + （子）position: absolute; left: 50%; transform: translateX(-50%);

因子元素采用absolute，所以（父）需额外设置height，否则父级元素高度为0（即无法显示）

<div style="height: 60px; position: relative; background-color: #F2C679;">
    <div style="width: 200px; position: absolute; left: 50%; transform: translateX(-50%); background-color: #e8952e;">
        水平居中
    </div>
</div>

效果

3.1.3 （父）position: relative + （子）position: absolute; left: 0; right: 0; margin: 0 auto;

因子元素采用absolute，所以（父）需额外设置height，否则父级元素高度为0（即无法显示）

<div style="height: 60px; position: relative; background-color: #F2C679;">
    <div style="width: 200px; position: absolute; left: 0; right: 0; margin: 0 auto; background-color: #e8952e;">
        水平居中
    </div>
</div>

效果

3.2 多个子元素

3.2.1 （父）text-align: center + （子）display: inline-block

• 同时会居中子块行内元素

<div style="text-align: center; background-color: #F2C679;">
    <div style="width: 200px; display: inline-block; background-color: #e8952e" >
        水平居中A
    </div>
    <div style="width: 300px; display: inline-block; background-color: #ea390f" >
        水平居中B
    </div>
</div>

效果

3.2.2 （父）display: flex ; justify-content: center;

<div style="display: flex; justify-content: center; background-color: #F2C679;">
    <div style="width: 200px; background-color: #e8952e">水平居中A</div>
    <div style="width: 300px; background-color: #ea390f">水平居中B</div>
</div>

效果