css 水平居中，垂直居中，水平垂直居中的方法

最新推荐文章于 2024-07-31 11:41:46 发布

布兰妮甜

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量451

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/chaosweet/article/details/140797091

版权

没有不可治愈的伤痛，没有不能结束的沉沦，所有失去的，会以另一种方式归来

文章目录

盒子水平居中的方法

定位：子绝父相再left：50%；margin-left：负的盒子宽度的一半

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }

    .wrap {
      position: absolute;
      left: 50%;
      width: 100px;
      height: 100px;
      margin-left: -50px;
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

flex布局：让子盒子居中，样式要写在父元素中 display: flex; justify-content: center;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      display: flex;
      justify-content: center;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      width: 100px;
      height: 100px;
      border: 1px solid #0f0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

在定位基础上，把margin-left换成css3中的transform：translate(-50px)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      position: absolute;
      left: 50%;
      width: 100px;
      height: 100px;
      border: 1px solid #0f0;
      transform: translate(-50px);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

在定位基础上，只保留子绝父相，在子盒子上添加margin：auto; right：0; left：0;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      position: absolute;
      right: 0;
      left: 0;
      width: 100px;
      height: 100px;
      margin: auto;
      border: 1px solid #0f0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

盒子垂直居中的方法

定位：子绝父相再top：50%; margin-top：负的盒子高度的一半

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      position: absolute;
      top: 50%;
      width: 100px;
      height: 100px;
      margin-top: -50px;
      border: 1px solid #0f0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

flex布局：让子盒子居中，样式要写在父元素中 display: flex; align-items: center;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      display: flex;
      align-items: center;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      width: 100px;
      height: 100px;
      border: 1px solid #0f0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

position + transform（子盒子有或没有宽高的时候都适用）top: 50%; left: 0; transform: translate(0%, -50%);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100px;
      height: 100px;
      border: 1px solid #0f0;
      transform: translate(0%, -50%);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

在定位基础上，只保留子绝父相，在子盒子上添加margin: auto; top: 0; bottom: 0;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
      height: 100px;
      margin: auto;
      border: 1px solid #0f0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

盒子水平垂直居中的方法

定位 + margin：auto

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100px;
      height: 100px;
      margin: auto;
      border: 1px solid #0f0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

display：flex

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      width: 100px;
      height: 100px;
      border: 1px solid #0f0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

display：flex + margin：auto

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      display: flex;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      width: 100px;
      height: 100px;
      margin: auto;
      border: 1px solid #0f0;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>

trnasform：translate

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid #f00;
    }

    .wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      margin: auto;
      border: 1px solid #0f0;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wrap"></div>
  </div>
</body>

</html>