css之“水平居中的五种方法”

<h1>水平居中</h1>
<!--1.定位元素已知宽度情况-水平居中(已知宽度情况)-->
<div style="position: relative;background: #c0a16b;height:60px;margin-top: 100px">
    <div style="position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px; /* 设定居中元素宽度 */
background: #BC70A4;
">
        已知宽度-水平居中
    </div>
</div>

<!--2.父绝子相left:50%  left: -50%;（不知道宽度情况）-->
<div style="position:relative;width: 100%;height: 200px;background: #BC70A4">
    <div style="position: absolute;left:50%;">
        <div href="" style="position: relative;left: -50%;">
            <img style="width: 100%" src="./images/coffee.jpg" alt="">
        </div>
    </div>
</div>


<!--3.margin: 0 auto（已知宽度情况）-推荐-->
<div style="height: 300px;background: #c0c0c0;margin-top: 50px">
    <div style="width: 100px;height: 100px;background: #BC70A4;margin: 0 auto"></div>
</div>


<!--4.display:flex（不知道宽度情况）-->
<div style="height: 300px;background: #c0c0c0;margin-top: 50px;display: flex;flex-direction: column">
    <div style="width: 100px;height: 100px;background: #BC70A4;align-self: center"></div>
</div>

<!--5.position:absolute和子元素给剩余宽度一半的margin-left: 150px（已知宽度情况）-推荐-->
<div style="position:relative;width: 100%;height: 200px;background: #BC70A4">
    <div style="position: absolute;width: 600px;height: 100px;background: #4CAF50">
        <div href=""  style="width: 300px; height:50px;background: #333333; margin-left: 150px">
<!--            <img style="width: 100%" src="./images/coffee.jpg" alt="">-->
        </div>
    </div>
</div>