水平居中的实现

水平居中的实现

通过flex布局来实现水平垂直居中

在父元素上设置居中
WX20190612-204443@2x.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    .container {
      margin: 0 auto;
      width: 300px;
      height: 200px;
      background: #66ccff;
      display: flex;
      /* 实现元素水平居中 */
      justify-content: center;
      /* 实现元素垂直居中 */
      align-items: center;
    }
    .child {
      width: 100px;
      height: 100px;
      background: #fff;
    }
    </style>
<body>
  <div class="container">
  <div class="child"></div>
</div>
</body>
</html>

通过 css布局来实现水平垂直居中

WX20190612-204423@2x.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      position: relative;
      width: 300px;
      height: 200px;
      background: pink;
      /* 水平居中 */
      margin: 0 auto;
    }

    .child {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50%;
      left: 50%;
      /* 下面两种方式均可 */
      /* margin-top: -50px;
  margin-left: -50px; */
      transform: translate(-50%, -50%);
      background: #fff;
    }
  </style>

<body>
  <div class="container">
    <div class="child"></div>
  </div>
</body>

</html>

水平居中:

  • 行内元素:display: inline-block; text-align: center;
  • 块级元素:margin: 0 auto;
  • Flex:display: flex; justify-content: center;

垂直居中:

  • 行高 = 元素高:line-height: height
  • Flex:display: flex; align-items: center;

参考文章

《jsliang 的 2019面试准备》

《CSS实现垂直居中的常用方法》

《CSS 用 position: absolute 与 transform 来居中块级元素的问题》

发表评论

电子邮件地址不会被公开。 必填项已用*标注