如何使一个盒子水平垂直居中

糯米|｡･㉨･)っ♡

已于 2022-12-07 21:54:21 修改

阅读量88

点赞数 2

于 2022-12-04 22:39:56 首次发布

本文链接：https://blog.csdn.net/m0_52477297/article/details/128178539

版权

前端面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一：利用定位(position)的方法（常用）

对父元素采用相对定位（relative),对子元素采用绝对定位(absolute)

让子盒子移动相对父盒子得上(top)50%,左(left)50%.

还要需要移动子盒子自身一半

所以margin-left 和 margin-top为负数(根据子盒子自身的宽度得一半设置)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 200px;
      height:200px;
      border: 1px solid #000;
      background-color: red;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      background-color: blue;
      position: absolute;
      top: 50%;
      left: 50%;
      /* 相对于child自身的宽高，可以更改 */
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>

方法二：利用margin-auto

父元素设置相对定位

子元素设置绝对定位，并且设置

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 200px;
      height:200px;
      border: 1px solid #000;
      background-color: red;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      background-color: blue;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>

方法三：利用display：table-cell

table-cell表格布局【此元素会作为一个表格单元格显示（类似 <td> 和 <th>）】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 200px;
      height:200px;
      border: 1px solid #000;
      background-color: red;
      display: table-cell;
      /* 垂直居中 */
      vertical-align: middle;
      /* 子盒子居中 */
      text-align: center;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      background-color: blue;
      /* 转换为行内块元素 */
      display: inline-block;    
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>

方法四：利用display-flex布局

给父盒子设置为弹性布局，然后使其在主轴和侧轴上都居中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 200px;
      height:200px;
      border: 1px solid #000;
      background-color: red;
      <!-- 弹性布局 -->
      display: flex;
      <!-- 在主轴方向得对其方式 -->
      justify-content: center;
      <!-- 在侧轴方向得对其方式 -->
      align-items: center;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      background-color: blue;   
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>

方法五：利用transform

这也是使用子绝父相得方式移动子盒子相对于父盒子得50%

然后使用transform移动自身盒子的-50%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 200px;
      height:200px;
      border: 1px solid #000;
      background-color: red;
      position: relative;
    }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      background-color: blue;   
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>

方法六：计算父盒子与子盒子的空间距离

给父元素设置border属性并给子元素设置

margin-left、margin-right、margin-top、margin-bottom

为子元素自身宽高的一半

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 200px;
      height:200px;
      border: 1px solid #000;
      background-color: red;
      }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      background-color: blue;   
     margin: 50px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>

方法七：使用Grid 布局

使用网格布局(grid)

给父元素设置display:grid

子元素使用 margin：auto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 200px;
      height:200px;
      border: 1px solid #000;
      background-color: red;
      /* 网格布局 */
      display: grid;
      }
    .child{
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      background-color: blue;   

      margin: auto;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>
</html>