1.20 对齐

• 元素水平居中
• 文本水平居中
• 图片水平居中
• 垂直居中

元素水平居中

• 设置宽度，margin: auto；

<div style="width:50%;margin: auto;background-color: red">1</div>

文本水平居中

<p style="text-align: center">p</p>

图片水平居中

<!--元素方式-->
<div style="text-align: center">
    <img src="icon.png">
</div>

<!--文本方式-->
<img src="icon.png" style="margin: auto;display: block">

垂直居中

• padding；

<div style="padding: 20px 0;background-color: aqua">
    <p>123</p>
</div>

• line-height；

<div style="height: 100px;line-height: 100px;background-color: aqua">
    <p>123</p>
</div>

• transform;

<div style="height: 100px;position: relative;background-color: aqua">
    <p style="margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)">123</p>
</div>