CSS实现水平垂直居中的方式-CSDN博客

本文详细介绍并演示了六种使用CSS实现元素水平垂直居中的方法，包括利用table-cell、display:flex、绝对定位配合margin:auto、负边距、translate属性以及结合display:flex和margin:auto的技巧，每种方法都附有具体的HTML结构和CSS代码。

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

方法1：table-cell

html结构：

<div class=“box1”>

<span>水平垂直居中</span>

</div>

css代码：

.box1{

display: table-cell;

vertical-align: middle;

text-align: center;

}

方法2：display:flex

html结构：

<div class="box2">

<div>水平垂直居中</div>

</div>

css代码：

.box2{

display: flex;

justify-content:center;

align-items:center;

}

方法3：绝对定位和0

.box3{position:relative}

.box3 div{

position:absolute;

top:0; left:0; right:0;bottom:0;

margin:auto;

}

方法4：绝对定位和负边距

.box4{position:relative}

.box4 div{

width:100px;

height:50px;

position:absolute;

top:50%;

left:50%;

margin:-25px 0 0 -50px;

text-align:center;

}

方法5：绝对定位和translate

.box5{position:relative}

.box5 div{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

text-align:center;

}

方法6：display:flex和margin:auto

.box6{ display: flex; text-align: center; }

.box6 div{ margin: auto; }

转载于:https://my.oschina.net/u/4081961/blog/3018863