CSS居中对齐（水平垂直居中对齐）

前端猫2024-03-16 20:04

方案一：flex布局【推荐】

给容器添加样式

复制代码

display: flex;
justify-content: center;
align-items: center;

html 复制代码

<!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>
      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid gray;
        width: 200px;
        height: 100px;

      }

      .item {
        width: 50px;
        height: 50px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">水平垂直居中</span>
    </div>
  </body>
</html>

方案二：子绝父相 + transform （CSS3）

限制条件：浏览器需支持CSS3，比较老的浏览器不适用

给容器（父元素）添加样式

html 复制代码

position: relative

给内部元素添加样式

html 复制代码

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

方案三：子绝父相 + 自动外边距（指定高度和宽度）

给容器（父元素）添加样式

复制代码

position: relative

给内部元素添加样式

复制代码

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

方案四：子绝父相 + 负外边距（知道宽度和高度 + 宽度和高度计算）不推荐

限制条件 ：需知道内部元素的宽度和高度

给容器（父元素）添加样式

复制代码

position: relative

给内部元素添加样式

复制代码

position: absolute;
left:50%;
margin-left:-内部元素宽度的一半;
top: 50%;
margin-top: -内部元素高度的一半;

html 复制代码

<!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>
      .box {
        margin: 30px 30px 0px 300px;
        border: 1px solid gray;
        height: 100px;
        position: relative;
      }
      .item {
        background-color: yellow;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 50%;
        margin-top: -25px;
        width: 300px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">水平垂直居中 -- 子绝父相 + 负外边距</span>
    </div>
  </body>
</html>

CSS居中对齐 （水平垂直居中对齐）

方案一：flex布局【推荐】

方案二：子绝父相 + transform （CSS3）

方案三：子绝父相 + 自动外边距（指定高度和宽度）

方案四：子绝父相 + 负外边距 （知道宽度和高度 + 宽度和高度计算）不推荐

CSS居中对齐（水平垂直居中对齐）

方案四：子绝父相 + 负外边距（知道宽度和高度 + 宽度和高度计算）不推荐