常见的css 实现水平垂直居中方法有哪些？（附10种）

本文链接：https://blog.youkuaiyun.com/abc465200/article/details/116096530

本文详细介绍了10种使用CSS实现水平垂直居中的方法，包括绝对定位配合负margin、transform translate、flex布局、css-table、grid和writing-mode等，适用于不同场景和兼容性需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 十种方法实现水平垂直居中

十种方法实现水平垂直居中

效果：

这里:left:50%是相对于父元素的50%,并且是从左上角开始算的

这里：-margin是相对于子元素自身的

需要居中元素固定宽高的3种

法1：absolute配合负margin

法2：absolute配合上下左右0；margin auoto

法3：absolute配合calc(50% - 25px)，注意calc空格

html

  <div class='wp'>父亲
      <div class='box'>儿子</div>
  </div>

css

.wp{
  border:1px solid red;
  height:400px;
  position:relative

}
.box{
  border:1px solid green;
  height:200px;
  width:50px;
}

/* 法1：absolute配合负margin
.box{
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-25px;
 margin-top:-100px
} */


/* 法2：absolute配合上下左右0；margin auoto
.box{
 position:absolute;
 left:0;
 top:0;
 right:0;
 bottom:0;
 margin:auto
} */

/* 法3:absolute配合calc(50% - 25px)，注意calc空格
.box{
 position:absolute;
 top:calc(50% - 100px);
 left:calc(50% - 25px)
} */

不用居中元素固定宽高的7种

absolute+transform
flex
css-table
tabled单元格
grid
linelight
writing-mode

法4.absolute配合transform translate

.wp{
  border:1px solid red;
  height:400px;
  position:relative
}

/* 4.absolute配合transform translate
.box{
  border:1px solid green;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
} */

法5:在父亲加flex布局配合justify-content、align-items

/* 法5:在父亲加flex布局配合justify-content、align-items
.wp{
  border:1px solid red;
  height:400px;
  display:flex;
  justify-content:center;
  align-items:center
}

.box{
  border:1px solid green;
}  */

法6：css新增table属性

/* 法6：css新增table属性，把div变成table,父table-cell、text-align、vertical-align 子变成行内元素inline-block
.wp{
  border:1px solid red;
  height:400px;
  width:400px;
  display:table-cell;
  text-align:center;
  vertical-align:middle
} 

.box{
  border:1px solid green;
  display:inline-block
}*/

法7.linelight

/* 法7.linelight box设成行内元素居中*/
.wp {
   border:1px solid red;
   text-align:center;
   line-height:400px;
} 
.box {
  border:1px solid green;
  display:inline-block;
  line-height:initial; /*高度为行内元素高度*/
  vertical-align:middle;
  font-size:16px;
  text-align:left /*修正文字*/
}

  <table>
  <tbody>
    <tr>
      <td class='wp'>
        <div class='box'>子</div>
      </td>
    </tr>
  </tbody>
  </table>

法8.table单元格


/* 法8.table单元格天然垂直居中 tbody->tr->td 配合text-align*/
.wp {
  border:1px solid red;
  height:200px;
  width:100px;
  text-align:center;

} 
.box {
  border:1px solid green;
  display:inline-block
}

法9.grid

/* 法9，grid 配合justify-self和align-self*/
.wp {
  border:1px solid red;
  height:200px;
  width:100px;
  display:grid
} 
.box {
  border:1px solid green;
  justify-self:center;
  align-self:center;
}

法10.writing-mode

html

<div class="wp">
    <div class="wp-inner">
        <div class="box">12312</div>
    </div>
</div>

css

/*法10，writing-mode改变显示方向 vuetical-lr垂直方向 vertical-tb水平 */
.wp {
    border:1px solid red;
    height:200px;
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    border:1px solid red;   
    display: inline-block;
    margin: auto;
    text-align: left;
}