css实现元素水平垂直居中

本文介绍五种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;
}

总结一下:      

1.利用负边距方法优点是具有良好的跨浏览器特性,兼容IE6/IE7,但是缺点是不能自适应,需设置子元素的宽高,不支持百分比。

2.利用margin:auto方法支持跨浏览器,支持百分比,但是必须声明子元素的width或height(至少一项,不然会占据父元素所有空间)。

这两种绝对定位的方法,可在子元素中设置overflow:auto;来防止内容越界溢出。

3.利用flex或transform方法的好处是代码量少,且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开,优雅地溢出。但flex IE8/IE9不支持,transform IE8不支持,且属性需要写浏览器厂商前缀。

4.table方法的好处是没有空间的限制,可以根据元素内容动态的改变高度,素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。但在IE6-7下无法正常运行,结构也更复杂。







           


### CSS 实现元素水平垂直居中的方法汇总 以下是几种常见的实现元素水平垂直居中的方法: #### 方法一:使用 `display: table-cell` 和 `vertical-align: middle` 通过将父容器的 `display` 属性设置为 `table-cell`,并配合 `vertical-align: middle`,可以轻松实现元素垂直居中。同时,为了达到水平居中,可以在父容器上设置 `text-align: center`[^1]。 ```html <div style="border: 1px solid black; width: 300px; height: 300px; display: table-cell; text-align: center; vertical-align: middle;"> <div style="background-color: red; display: inline-block;">水平垂直居中</div> </div> ``` --- #### 方法二:使用绝对定位和 `transform` 这种方法利用了 `position: absolute` 的特性以及 `translate()` 函数来调整位置。通过设置 `top: 50%; left: 50%` 将元素中心点移动到父容器的中心,再用 `transform: translate(-50%, -50%)` 抵消自身的宽度和高度偏移[^4]。 ```css .parent { position: relative; width: 300px; height: 300px; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` --- #### 方法三:使用 Flexbox 布局 Flexbox 是现代布局中最常用的方法之一。只需将父容器的 `display` 设置为 `flex`,并通过 `align-items: center` 和 `justify-content: center` 来分别控制垂直和水平方向上的居中[^2]。 ```css .parent { display: flex; align-items: center; justify-content: center; width: 300px; height: 300px; } ``` --- #### 方法四:使用 Grid 布局 Grid 布局提供了更强大的二维布局能力。可以通过设置 `place-items: center` 或者单独指定 `align-items` 和 `justify-items` 来完成居中操作[^2]。 ```css .parent { display: grid; place-items: center; width: 300px; height: 300px; } ``` --- #### 方法五:行内块元素与基线对齐 对于某些特定类型的行内块元素(如 `<input>`、`<img>` 等),可以直接通过设置其 `vertical-align` 属性为 `middle` 来实现与其他文本内容的水平对齐[^3]。 ```html <span>这是一个例子:</span><input type="text" style="vertical-align: middle;" /> ``` --- 以上列举了几种主流的 CSS 水平垂直居中方法,每种方法都有各自的适用场景和技术特点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值