Home CSS
# 1. 行内样式居中 (text-align)
<style>
    .parentEl {
      margin: 50px auto;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid rgb(10, 0, 0);
    }
  </style>
  <body>
    <div class="parentEl">
      <div class="childEl">content</div>
    </div>
</body>
​		 结果如下：


result


# 2. 行内样式居中 (width)


<style>
      .parentEl {
        margin: 50px auto;
        width: 100px;
        height: 100px;
        line-height: 100px;
        border: 1px solid rgb(10, 0, 0);
      }
       # /* 具体使用查看 https://developer.mozilla.org/zh-CN/docs/Web/CSS/width */
      .childEl {
      # /* 使用 fit-content/max-content/min-content 和上面效果一致 */
        width: fit-content; 
        margin: auto;
      }
    </style>
  <body>
     <div class="parentEl">
       <div class="childEl">content</div>
     </div>
  </body>
结果如下：


result


# 3.BFC 水平垂直居中 margin


<style>
    .parentEl {
      position: relative;
      height: 200px;
      background-color: #ed1e11;
    }
     # // position定位后主要利用margin走自身宽高负一半即可居中  
    .childEl {
      position: absolute;
      top: 50%;
      left: 50%;
      # /* 自身宽度的一般 */
      margin-left: -50px; || margin-left: calc(50% - 50px);
      # /* 自身高度的一般  */
      margin-top: -50px; || margin-top: calc(50% - 50px);
      width: 100px;
      height: 100px;
      background-color: #1a8ae5;
    }
  </style>
  <body>
    <div class="parentEl">
      <div class="childEl">content</div>
    </div>
  </body>
结果如下：


result


# 4.BFC 水平垂直居中 (translate)


<style>
    .parentEl {
      position: relative;
      height: 200px;
      background-color: #d2691e;
    }
    # // 定位后用transform的translate移动自身宽高负一半即可居中
    .childEl {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: #fff;
    }
  </style>
  <body>
    <div class="parentEl">
      <div class="childEl">content</div>
    </div>
  </body>
结果如下：


result


# 5.BFC 水平垂直居中 (padding)


<style>
     # /* 注意 padding 会撑大盒子 */
     # /* 给子元素设置宽度，不使用 padding 挤压给子元素宽度，正常结果参考 result1*/ 
    .parentEl {
      margin: 50px auto;
      width: 200px;
      padding: 50px;
      background-color: #d2691e;
      # /* 如果想不撑大盒子可加 box-sizing: border-box; */
      # /* 但是此时 padding 不可超过父元素宽度一半，否则会挤压消失 */
      # /* box-sizing: border-box; */
    }
      # /* 如果连高度也没有设置，则会超出在一行显示不会换行增加高度，参考 result2*/
    .childEl {
      height: 200px;
      background-color: #1a8ae5;
    }
  </style>
  <body>
    <div class="parentEl">
      <div class="childEl">content</div>
    </div>
  </body>
结果如下：


result1:result


result2:result


# 6.BFC 水平垂直居中 (flex)


<style>
    .parentEl {
      margin: 200px auto;
      height: 200px;
      width: 200px;
      display: flex;
      # /* 水平居中 */
      justify-content: center;
      # /* 垂直居中 */
      align-items: center;
      background-color: #4d9c58;
    }
    .childEl {
      width: 100px;
      height: 100px;
      background-color: #ffffff;
    }
  </style>
  <body>
    <div class="parentEl">
      <div class="childEl">content</div>
    </div>
  </body>
结果如下：


result


# 7.BFC 水平垂直居中 (before/after)


<style>
   .parentEl {
      margin: 200px auto;
      height: 200px;
      text-align: center;
      background-color: #d2691e;
    }
    .childEl {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #1a8ae5;
    }
  </style>
     <body>
    <div class="parentEl">
      <div class="childEl">content</div>
    </div>
  </body>
结果如下：


result


# #此时给父元素加上 before 并给父元素的 before 开启 BFC


<style>
    .parentEl {
      margin: 200px auto;
      height: 200px;
      text-align: center;
      background-color: #d2691e;
    }
   
    .childEl {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #1a8ae5;
    }
    .parentEl::before {
      content: '';
      display: inline-block;
      width: 10px; 
      height: 200px;
      background-color: yellow;
    }
  </style>
  <body>
    <div class="parentEl">
      <div class="childEl">content</div>
    </div>
  </body>
结果如下：


result


# #最后再给 parentEl 和 childEl 都加上 vertical-align: middle; 即可居中参考 rsult2


<style>
    .parentEl {
      margin: 200px auto;
      height: 200px;
      text-align: center;
      background-color: #d2691e;
    }
   
    .childEl {
      display: inline-block;
      # /* 先给 childEl 设置 vertical-align: middle; 参考 result1 */
      vertical-align: middle;
      width: 100px;
      height: 100px;
      background-color: #1a8ae5;
    }
    .parentEl::before {
      content: '';
      display: inline-block;
      # /* 再给.parentEl::before 设置 vertical-align: middle; 即可居中即 result2 */
      vertical-align: middle;
      width: 10px; # /* 注意最后要把宽度设置为 0 才是真正居中 */
      height: 200px;
      background-color: yellow;
    }
  </style>
  <body>
    <div class="parentEl">
      <div class="childEl">content</div>
    </div>
  </body>
result1:result


result2:result


# 8.BFC 水平垂直居中 (background-clip)


<style>
    .parentEl {
      width: 200px;
      height: 200px;
      background-color: #d2691e;
    }
    .childEl {
      width: 100px;
      height: 100px;
      background-color: #1a8ae5;
    }
  </style>>
  <body>
  <div class="parentEl">
    <div class="childEl">content</div>
  </div>
  </body>
结果如下：


result


# 此时需要添加两个属性


<style>
    .parentEl {
      width: 200px;
      height: 200px;
      background-color: #d2691e;
    }
    .childEl {
      width: 100px;
      height: 100px;
      # /* 此时加上 padding: calc ((100% - 100px) / 2); 参考 result1 */
      padding: calc((100% - 100px) /2); 
      # /* 最后再加上 background-clip: content-box; 就可居中，参考 result2 */
      background-clip: content-box;
      background-color: #1a8ae5;
    }
  </style>>
  <body>
  <div class="parentEl">
    <div class="childEl">content</div>
  </div>
  </body>
result1:result


result2:result


# 9.BFC 水平垂直居中 (grid)


<style>
    body {
      background-color: rgb(170, 99, 49);
    }
    .parentEl {
      display: grid;
      width: 600px;
      height: 600px;
      background-color: #d2691e;
    }
    .childEl {
      width: 100px;
      height: 100px;
      align-self: center;
      justify-self: center;
      background-color: #1a8ae5;
    }
</style>
  <body>
  <div class="parentEl">
    <div class="childEl">content</div>
  </div>
  </body>
结果如下：


result