CSS垂直居中的几种方法

时间：2024-04-12 20:00:29 来源：网络cs 作者：胡椒栏目：卖家故事阅读：

标签：方法垂直居中

阅读本书更多章节>>>>

1.设置行高line-height

2.内边距法（padding）

3.模拟表格法

4.绝对定位

5.使用flex布局

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>

效果显示：