css实现元素水平垂直居中

最新推荐文章于 2024-12-05 19:41:11 发布

原创最新推荐文章于 2024-12-05 19:41:11 发布 · 297 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#元素水平垂直居中

html+css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍五种CSS元素水平垂直居中的方法，包括绝对定位利用负边距、Transform、绝对定位加margin:auto、弹性盒子Flex及Table模拟等。适用于不同场景需求。

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

在我学习的过程中，css中元素实现水平垂直居中还是蛮常用的，下面是我了解到的几种方法，希望对大家有帮助，大家有更好的方法，欢迎大家补充。

元素水平居中的方法我了解到有5种，分别是绝对定位利用负边距、绝对定位+margin：auto；、弹性盒子Flex、Transform和Table。

首先HTML代码：

 <div class="wrap">
       <div class="center"></div>
   </div>

1、绝对定位，利用负边距。

利用负边距实现元素的水平垂直居中，首先相对于父元素（position：relative；），子元素要position：absolutue；并且子元素要设宽（width）高（height），设置left：50%；top：50%；最后加上负边距，margin-left：width的一半；margin-right：height的一半；。

其实很好理解，子元素绝对定位，那么子元素就是通过自身的边界（margin）相对于父元素进行定位；当我们把left：50%；top：50%；的时候，就相当于子元素的左边界和上边界都在整个界面50%的地方，也可以理解为，子元素左上角的位置水平垂直居中整个界面。那我们就通过负边距来调整子元素中心点代替左上角的位置，来实现子元素水平垂直居中。margin-left：width的一半；margin-right：height的一半；。

上代码：

.wrap{
    position:relative;
    width:200px;
    height:200px;
    background-color:green;
}
.center{
    position:absolute;
    width:100px;
    height:100px;
    background-color:black;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
}

效果如下：

2、Transform

利用css3中的transform属性

代码如下：

.wrap{
    position:relative;
    width:200px;
    height:200px;
    background-color:green;
    display:flex;
}
.center{
    position:absolute;
    width:100px;
    height:100px;
    background-color:black;
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0);
}

效果如下：

这种方法不建议在pc端使用，在移动端大可放心使用。这种方法好处就是，不用像方法1通过负边距来实现元素的水平垂直居中。

3、绝对定位+margin：auto；

子元素绝对定位，并且设置子元素top：0；bottom：0；right：0；left：0；margin：auto；

理解一下：当我们给子元素设置top：0；bottom：0；right：0；left：0；浏览器就会重新给子元素分配一个边界框，子元素会填充整个父级元素的可用空间，我们给子元素设置宽高，防止子元素占据父元素整个可用空间。再给子元素加上margin：auto；那么margin-top和margin-bottom一样，margin-left和margin-right一样，子元素就在父元素中水平垂直居中。

代码如下：

.wrap{
    position:relative;
    width:200px;
    height:200px;
    background-color:green;
}
.center{
    position:absolute;
    width:100px;
    height:100px;
    background-color:black;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

效果如下：

4、弹性盒子Flex

用到css3中的属性，flex布局为弹性布局，只需将父元素设置三个属性即可(display,justify-content,align-items)

代码：

<div class="wrap">
       <div class="center">
           弹性布局flex
       </div>

.wrap{
    width:200px;
    height:200px;
    background-color:green;
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
}

效果：

这种方法比较简洁，不需要给元素设宽高就可以实现水平垂直居中。

5、Table模拟表格效果

<div class="wrap">
       <div class="center">
           table模拟表格
       </div>

情况一：

组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（子元素设置display:inline-block即可）。这在子元素不确定宽高和数量时，特别实用！

.wrap{
    width:200px;
    height:200px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid red;
}
.center{
    display:inline-block;
}

效果如下：

情况二：

　对table-cell元素设置百分比（如100%）的宽高值时无效的，但是可以将父元素设置display:table，再将父元素设置百分比宽高，子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。

.wrap{
    width:100%;
    height:100%;
    display:table;

}
.center{
    vertical-align:middle;
    text-align:center;
    display:table-cell;
    border:2px solid red;
}