CSS居中对齐（垂直居中）_css 行内标签垂直居中对齐

作者：空白诗007 | 2024-07-19 20:35:04

踩

css 行内标签垂直居中对齐

内部块级元素的高度要小于容器(父元素)

方案一：行高 = 容器高度（单行内联元素）

限制条件：仅用于单行内联元素 display:inline 和 display: inline-block;

给容器添加样式


 height: 100px;
 line-height: 100px;


<!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 {
        border: 1px solid gray;
        height: 100px;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">垂直居中 -- 内联元素 display:inline</span>
    </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>
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid gray;
        display: flex;
        align-items: center;
      }
 
      .item {
        width: 50px;
        height: 50px;
        border: 1px solid red;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item"></span>
    </div>
  </body>
</html>

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

限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式

position: relative

给内部元素添加样式


position: absolute;
top: 50%;
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>
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid gray;
        position: relative;
      }
 
      .item {
        width: 50px;
        height: 50px;
        border: 1px solid red;
        background: yellow;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item"></span>
    </div>
  </body>
</html>

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

限制条件：内部元素需限定高度

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

position: relative

给内部元素添加样式


position: absolute;
top: 0;
bottom: 0;
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>
      .box {
        width: 100px;
        border: 1px solid gray;
        width: 200px;
        position: relative;
      }
 
      .item {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: yellow;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">1111</span>
    </div>
  </body>
</html>

子绝父相 + 负外边距（知道高度 + 高度计算）

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

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

position: relative

给内部元素添加样式


position: absolute;
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>
      .box {
        margin: 30px;
        border: 1px solid gray;
        width: 200px;
        height: 100px;
        position: relative;
      }
 
      .item {
        position: absolute;
        top: 50%;
        margin-top: -25px;
        height: 50px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="item">垂直居中</span>
    </div>
  </body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/853375

CSS居中对齐 （垂直居中）_css 行内标签垂直居中对齐

方案一：行高 = 容器高度（单行内联元素）

方案二：flex布局【推荐】

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

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

子绝父相 + 负外边距 （知道高度 + 高度计算）

CSS居中对齐（垂直居中）_css 行内标签垂直居中对齐

子绝父相 + 负外边距（知道高度 + 高度计算）