div水平垂直居中的方法

最新推荐文章于 2024-03-13 10:55:47 发布

Dark_programmer

最新推荐文章于 2024-03-13 10:55:47 发布

阅读量1.2k

点赞数 1

分类专栏： css 文章标签： css 定位 flex

本文链接：https://blog.youkuaiyun.com/Dark_programmer/article/details/105156859

版权

css 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍并演示了六种常见的CSS布局技巧，包括绝对定位、margin负间距、margin:auto、flex布局、table-cell及calc函数，每种方法均附有代码示例，帮助读者掌握不同场景下的居中布局解决方案。

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

方法一、

绝对定位方法

若当前div的宽高未知，可使用transform: translate(-50%, -50%)。给父级元素使用相对定位,当前元素使用绝对定位，left,top均为50%，那么子元素的中心点就会在父级元素的中心，再将子元素偏移自身宽高的一半，即可水平垂直居中。
代码示例：

布局：

 <div class="father">
      这里是父容器
      <div class="child">
        这里是子容器
      </div>
 </div>

父容器样式：

.father {
        width: 200px;
        height: 200px;
        background: yellowgreen;
        /*重点*/
        position: relative;
      }

子容器样式：

.child {
        width: 100px;
        height: 100px;
        background: slateblue;
        /*重点*/
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

效果图：
在这里插入图片描述

方法二、

若当前div的宽高已知，假设宽高均为600px。

div绝对定位水平垂直居中【margin 负间距】， 这或许是当前最流行的使用方法。
给当前元素一个绝对定位，在将定位点移动到父元素中心点之后，在将自身偏移本身宽高的一半，和方法一很类似

布局：

<body>
    <div class="center">这里是div</div>
  </body>

样式：

.center {
        width: 600px;
        height: 600px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -300px;
        margin-top: -300px;
      }

效果图：
在这里插入图片描述

方法三、

div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】

给当前元素使用 position: absolute，上下左右皆为 0 ，结合 margin: auto，可使得其水平垂直居中

代码示例：

布局：

 <body>
    <div class="center">这里是div</div>
  </body>

样式：

.center {
        width: 200px;
        height: 200px;
        background: yellowgreen;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }

效果图：
在这里插入图片描述

方法四、

flex布局方法：当前div的父级添加flex css样式

布局：

 <div class="father">
      <div class="child">这里是子div</div>
 </div>

父元素样式：

.father {
        width: 200px;
        height: 200px;
        background: yellowgreen;
        display: flex;
        justify-content: center;
        align-items: center;
      }

子元素样式：

.child {
        width: 100px;
        height: 100px;
        background: slateblue;
      }

效果图：
在这里插入图片描述

方法五、

table-cell实现水平垂直居中: table-cell middle center组合使用

布局：

 <div class="table-cell">
      <p>水平垂直居中</p>
 </div>

样式：

 .table-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 240px;
        height: 180px;
        background: yellowgreen;
      }

在这里插入图片描述

方法六、

绝对定位：calc() 函数动态计算实现水平垂直居中

布局：

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

样式：

.calc{
  position: relative;<br>  border: 1px solid #ccc;<br>  width: 400px;<br>  height: 160px;
}
.calc .child{
  position: absolute;<br>  width: 200px;<br>  height: 50px;
  left:-webkit-calc((400px - 200px)/2);
  top:-webkit-calc((160px - 50px)/2);
  left:-moz-calc((400px - 200px)/2);
  top:-moz-calc((160px - 50px)/2);
  left:calc((400px - 200px)/2);
  top:calc((160px - 50px)/2);
}

效果：
在这里插入图片描述