CSS垂直居中的几种方法

bug搬运工啊

已于 2022-10-05 17:12:01 修改

阅读量7.8k

点赞数 7

文章标签： css 前端 javascript

于 2022-10-04 19:20:42 首次发布

本文链接：https://blog.csdn.net/m0_72838183/article/details/127164714

版权

1.设置行高line-height

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可

div {
    height:30px;
    width:100%;
    line-height:30px;
    text-align:center;
}

2.内边距法（padding）

另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中

div {
    height:20px
    widht:100%
    padding:20px 0px;
}

3.模拟表格法

如果子元素是个块元素，将容器设置为display:table-cell，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

<!DOCTYPE html>
<html>
  <head>
    <title>模拟表格法</title>
    <style>
      #parent {
        background: rgb(108, 182, 79);
        height: 200px;
        width: 200px;
        display: table-cell;
        vertical-align: middle;
      }
      #child {
        background-color: red;
        color: white;
        width: 100px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">我是子元素</div>
    </div>
  </body>
</html>

效果如下：

4.绝对定位

将子元素position属性改为absolute，上边距改为50%，但因为自身还有高度，所以此时还未处于居中状态，使用transform将y轴方向向上增加自身的50%，正好将自己处于中间位置，水平居中同理

#parent {
	position: relative; /*定位*/
    width:200px;
    height:200px;
}
#child {
	position: absolute;
    width:100px;
    height:100px;
	top: 50%;
    left:50%;
	transform: translateY(-50%);  /*定位*/
    transform: translateX(-50%);
}

5.使用flex布局

即使子元素高度不确定的情况下也可以使用该方法，比较推荐，只需要将父元素的display改为flex，然后将align-items改为center即可实现垂直居中，将justify-content改为center即可实现水平居中

<!DOCTYPE html>
<html>
  <head>
    <title>css垂直居中的几种方法</title>
    <style>
      #parent {
        background: rgb(108, 182, 79);
        height: 200px;
        width: 200px;
        display: flex;
        align-items: center; /*垂直居中*/
        justify-content: center; /*水平居中*/
      }
      #child {
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">我是子元素</div>
    </div>
  </body>
</html>

效果显示：