2021-09-04 前端每日一题——CSS 居中方案点击这里查看效果： https://codesandbox.io/

前端每日一题，放置于：upupming/frontend-learning-map: 前端学习路线（TODOs） (github.com)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        width: 100%;
        height: 40px;
        border: 1px solid salmon;
      }
      /* margin auto 只能水平居中 */
      .method-1 {
        width: 50px;
        height: 30px;
        background-color: red;
        margin: auto auto;
      }

      /* 相对定位 + 负边距 */
      .method-2 {
        width: 50px;
        height: 30px;
        background-color: blue;
        /* div 左上角位于父元素中心 */
        position: relative;
        left: 50%;
        top: 50%;
        /* 通过负边距向上移动 height/2、向左移动 width/2，使得 div 中心位于父元素中心 */
        margin: -15px 0 0 -25px;
      }

      /* 相对定位 + 负 transform */
      .method-3 {
        width: 50px;
        height: 30px;
        background-color: pink;
        /* div 左上角位于父元素中心 */
        position: relative;
        left: 50%;
        top: 50%;
        /* 通过 translate 向上移动 height/2、向左移动 width/2，使得 div 中心位于父元素中心 */
        transform: translate(-50%, -50%);
      }

      /* 绝对定位 + margin auto */
      .container-4 {
        position: relative;
      }
      .method-4 {
        width: 50px;
        height: 30px;
        background-color: yellow;
        /* div 左上角位于父元素中心 */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /* 元素居中，margin 自动填充外围区域 */
        margin: auto auto;
      }

      /* 文本设置行高等于高度即可在内部垂直居中 */
      .method-5 {
        height: 30px;
        background-color: aqua;
        font-size: 10px;
        line-height: 30px;
      }

      /* 使用 transform 水平居中的同时，使用 vertical-align 居中 */
      /* 参考 https://alexzhong22c.github.io/2019/02/05/vertical-align-middle/#%E5%AE%8C%E7%BE%8E%E5%B1%85%E4%B8%AD-%E6%B7%BB%E5%8A%A0%E8%BE%85%E5%8A%A9%E5%85%83%E7%B4%A0 */
      .method-6 {
        width: 50px;
        height: 30px;
        position: relative;
        transform: translateX(-50%);
        left: 50%;
        background-color: blueviolet;
        display: inline-block;
        vertical-align: middle;
      }
      /* 添加辅助元素从而实现完美居中 */
      .method-6-extra {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }

      .container-7 {
        display: flex;
        justify-content: center; /*子元素水平居中*/
        align-items: center; /*子元素垂直居中*/
      }
      .method-7 {
        width: 50px;
        height: 30px;
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <h1>Hello world!</h1>
    <div class="container">
      <div class="method-1"></div>
    </div>
    <div class="container">
      <div class="method-2"></div>
    </div>
    <div class="container">
      <div class="method-3"></div>
    </div>
    <div class="container container-4">
      <div class="method-4"></div>
    </div>
    <div class="container">
      <p class="method-5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, at.
      </p>
    </div>
    <div class="container container-6">
      <div class="method-6"></div>
      <i class="method-6-extra"></i>
    </div>
    <div class="container container-7">
      <div class="method-7"></div>
    </div>
  </body>
</html>