div盒模型居中的方式

最新推荐文章于 2025-05-15 13:35:31 发布

TomZengl

最新推荐文章于 2025-05-15 13:35:31 发布

阅读量295

点赞数

CC 4.0 BY-SA版权

分类专栏： auto 文章标签： css html5

本文链接：https://blog.youkuaiyun.com/TomZengl/article/details/107733863

auto 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了如何使用CSS实现子元素在父容器中的水平垂直居中对齐，包括各种居中方法的详细解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平垂直居中

实现子元素的水平垂直居中

<!DOCTYPE html>
   <html>
     <title>水平垂直居中</title>
<head>
  <style type="text/css">
    .outer {
      height: 200px;
      width: 200px;
      background: tomato;
      margin: 10px;
      float: left;
      position: relative;
    }
    .inner {
      height: 100px;
      width: 100px;
      background: black;
    }
    /*
     * 通过 position 和 margin 居中
     * 缺点：需要知道 inner 的长宽
     */
    .inner1 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
    /*
     * 通过 position 和 margin 居中 (2
     */
    .inner2 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    /*
     * 通过 flex 进行居中
     */
    .outer3 {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /**
     * 通过 position 和 transform 居中
     */
    .inner4 {
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      position: absolute;
    }
</style>
</head>
<body>
  <div class="outer outer1">
    <div class="inner inner1"></div>
  </div>
  <div class="outer outer2">
    <div class="inner inner2"></div>
  </div>
  <div class="outer outer3">
    <div class="inner inner3"></div>
  </div>
  <div class="outer outer4">
    <div class="inner inner4"></div>
  </div>
</body>
</html>