居中布局（一个父div里面包含一个子div，让子div上下左右居中）

一个努力搬砖的码农

已于 2024-03-02 11:05:16 修改

阅读量543

点赞数 11

文章标签：前端 css html css3

于 2024-01-06 17:44:26 首次发布

本文链接：https://blog.csdn.net/m0_61487941/article/details/135429285

版权

文章介绍了在子div没有固定宽高时，通过table+cell-table、绝对定位、CSS3transform、flex布局和相对/绝对定位配合移动负边距等方法实现元素水平垂直居中的技巧，同时讨论了各自的优缺点以及浏览器兼容性。

摘要由CSDN通过智能技术生成

子div无宽高

方法一

思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中

优点：父元素（parent）可以动态的改变高度（table元素的特性）

缺点：IE8以下不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>

.parent{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

</style>
<body>
    <div class="parent">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>

方法二：

思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)

优点：高大上,可以在webkit内核的浏览器中使用

缺点：不支持IE9以下不支持transform属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent .child{
    position: absolute;
    color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent">
        <div class="child">hello world-3</div>
</div>
</body>
</html>

方法三：

思路：使用css3 flex布局/grid布局

优点：简单快捷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent{
    // flex布局
    display: flex;
    // grid布局
    //display：grid；
    justify-content: center;
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
 <div class="parent">
        <div class="child">hello world-4</div>
    </div>
</body>
</html>

子div有宽高

方法四：

思路：使用相对定位和绝对定位，让四周拉力均匀

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #box1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position:relative;
    }
    #box2{
      width: 20px;
      height: 20px;
      background: #f00;
      position:absolute;
      top:0; /* 四周拉力相同 */
      right:0; /* 四周拉力相同 */
      bottom:0; /* 四周拉力相同 */
      left:0; /* 四周拉力相同 */
      margin:auto; /* 再设置 marign 自动 */
    }

  </style>
</head>
<body>
  <div id="box1">
    <div id="box2"></div>
  </div>
</body>
</html>

方法五：

思路：移动负边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #box1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position:relative;
    }
    #box2{
      width: 20px;
      height: 20px;
      background: #f00;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-10px; /* 知道自己大小的情况，自身高度的一半 */
      margin-top:-10px; /* 知道自己大小的情况，自身高度的一半 */
    }

  </style>
</head>
<body>
  <div id="box1">
    <div id="box2"></div>
  </div>
</body>
</html>