水平居中有哪些实现方式

• <center> (不推荐使用)

  <center>center</center>
  

  center
• margin

  <div style='width: 3em; margin: 0 auto;'>margin<div>
  

  margin
• text-align

  <div style='text-align: center'>text-align</div>
  

  text-align

• table + margin

  display: table 在表现上类似 block 元素，但是宽度为内容宽。

  <div>
    <div style='display: table; margin: 0 auto;'>table + margin</div>
  </div>
  

  table + margin
• transform

  <div>
    <div style='position: relative; left: 50%; transform: translateX(-50%); display: inline-block;'>transform</div>
  </div>
  

                    transform
• flex + justify-content

  <div style='display: flex; justify-content: center;'>
    <div>flex</div>
  </div>
  

                                          flex

width:3em;表示width为当前字体大小的3倍。