关于 Flex 布局 - Githubissues

在项目的开发过程中，常遇到水平居中、垂直居中的需求。挺多人第一个想到可能是：text-align、vertical-align，但这两个属性仅适用于行内元素 。

{
  text-align: center;
  vertical-align: middle
}

本文，介绍一些常见的居中方法，包括水平居中、垂直居中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 此处省略一些众所周知的代码... -->
    <style>
      .parent {
        width: 100px;
        height: 100px;
        border: 2px solid #f00; /* 红色 */
      }
      .child {
        width: 50px;
        height: 50px;
        border: 2px solid #00f; /* 蓝色 */
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">child</div>
    </div>
  </body>
</html>

水平居中：text-align: center 和 margin: 0 auto，其中 text-align 作用的对象是它的子元素，且必须为行内元素，块级元素无效。

<!-- 样式 -->
<style>
  .parent {
    width: 100px;
    height: 100px;
    border: 2px solid #f00;
    text-align: center;
  }
  .child {
    width: 50px;
    height: 50px;
    border: 2px solid #00f;
  }
</style>

<!-- HTML -->
<div class="parent">
  <!-- 块级元素 -->
  <div class="child">child</div>
  <!-- 行内元素 -->
  <img src="./images/pic.jpg" width="40px" height="40px" />
</div>

下班继续写，哈哈哈……

toFrankie / blog

关于 Flex 布局 #188