[CSS]HTML中div元素垂直居中的多种方式实现

2021-08-13 415点热度 0人点赞 0条评论

页面排版的时候,会遇到一个需要将div或者其他元素垂直居中到容器的问题,实现的示例效果如图所示:

实现

  • 先说下传统做法,在知道父容器高度的情况下,使用position: relative; top: 50%; transform: translateY(-50%);
<!doctype html>
<html>

<head>
  <style>
    .parent {
      background: blue;
      width: 400px;
      height: 400px;
    }

    .child {
      width: 100px;
      height: 100px;
      background: green;

      /* 水平居中 */
      margin: 0 auto;
      /* 以下三行实现垂直居中 */
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>

<body>

  <div class="parent">
    <div class="child">
    </div>
  </div>

</body>

</html>
  • 不知道高度的情况下,或者更加现代一些的做法,就是利用flex布局,设置justify-content和align-items为center,来看下例子:
<!doctype html>
<html>

<head>
  <style>
    html,
    body {
      height: 100%;
    }

    .parent {
      background: blue;
      width: 400px;
      height: 100%;

      display: flex;
      justify-content: center;
      /* align horizontal */
      align-items: center;
      /* align vertical */
    }

    .child {
      width: 100px;
      height: 100px;
      background: green;
    }
  </style>
</head>

<body>

  <div class="parent">
    <div class="child">
    </div>
  </div>

</body>

</html>

 

 

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论