DIV+CSS实现盒子居中的几种方法比较（考虑兼容性）

电玩女神 2022-06-10 12:39 145阅读 0赞

例子中html代码如下：

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

为了让结果更清晰加上如下的css样式

.center{ width:100px; height: 100px; background-color: gray; }

**1. 实现水平居中**

**1) margin: 0 auto——****IE6-8，chrome和mozilla测试有效**

这是常用的方法，该方法兼容IE6-8，chrome和mozilla

**2) 父元素设置text-align: center——但是该方法只适用于IE6，IE7**

例如设置：

body{ text-align: cenert; }

**3) 利用position：absolute和margin——IE6-8，chrome和mozilla测试有效**

.center{ position: absolute; left: 50%; margin-left: -50%; }

这里用left：50%使div的左边界距离窗口50%，但是需要向左移动50%的width（div本身的宽度）才能真正实现水平居中；

也可以替换left和margin-left:

.center{ position: absolute; margin-left: 50%; left: -50px; }

**2. 实现水平垂直居中**

**1) 利用position: absolute和margin：auto——兼容IE8，chrome和mozilla，但是不兼容IE6-7**

.center{ position: absolute; top:0; bottom:0; left:0; right:0; margin: auto; }

可能有人认为利用margin: 0 auto可以实现水平居中， 那么margin: auto 0和margin: auto可以分别实现垂直居中和水平垂直居中，但是其实是错误的。前者无法实现居中，而后者也只能实现水平居中。但是配合position: absolute就能实现水平垂直居中。

**2) 利用position: absolute和margin——IE6-8，chrome和mozilla测试有效**

.center{ position: absolute; left: 50%; margin-left: -50px; left: 50%; margin-left: -50px; }

**3）利用css3中的flex弹性盒子——不支持IE**

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

css:

.container{ width:500px; height:500px; background:yellow; display: flex; } .center{ width:100px; height:100px; background:gray; margin:auto }

![Center][]

[Center]: /images/20220610/347dfee75e16497b8fff157f9a62ceaf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中实现元素居中的几种方法总结

一、使用 text-align: center 居中使用 text-align: center; 可以在CSS中实现内联元素的水平居中。这个技术利用了CSS的 text

落日映苍穹つ/ 2024年02月20日 11:43/ 0 赞/ 18 阅读

相关 div垂直居中的几种方法

第一种 1. 父类 .father { height:100%; // height:100vh; width:100%;

小鱼儿/ 2023年03月03日 08:48/ 0 赞/ 159 阅读

相关 CSS盒子居中的方法

CSS盒子居中的方法 1. CSS盒子水平居中的方法 1.1 使用 margin: 0 auto; 当元素的左右外边距（margin）相等的时候，元素就处在中

电玩女神/ 2022年10月13日 05:25/ 0 赞/ 189 阅读

相关 CSS垂直居中的几种方法

> 单行内容居中单行文字居中，只需要设置文字的line-height属性和父容器等高即可。 <div class="box"> <p>我是

傷城~/ 2022年07月28日 04:28/ 0 赞/ 224 阅读

相关 div盒子在页面中水平垂直居中的几种方法。

方法一：设置绝对定位absolute，然后margin为自动 <html lang="en"> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月11日 06:43/ 0 赞/ 155 阅读

相关 DIV+CSS实现盒子居中的几种方法比较（考虑兼容性）

例子中html代码如下： <div class="center"></div> 为了让结果更清晰加上如下的css样式 .center{ widt

电玩女神/ 2022年06月10日 12:39/ 0 赞/ 146 阅读

相关 css垂直居中的几种方法

`<div ``class``="app app1"><span>垂直居中的元素</span></div>` 一： `.app1{` ` ``display: ta

灰太狼/ 2022年03月25日 13:10/ 0 赞/ 281 阅读

相关 CSS——几种万能居中的方法

calc() 通过定位将元素更改为为inline-block元素后水平居中将元素更改为block元素后水平居中

心已赠人/ 2022年03月17日 02:18/ 0 赞/ 298 阅读

相关纯CSS实现垂直居中的几种方法

转自: [https://www.cnblogs.com/hutuzhu/p/4450850.html][https_www.cnblogs.com_hutuzhu_p_445

妖狐艹你老母/ 2022年01月30日 10:04/ 0 赞/ 225 阅读

相关 CSS - 设置盒子垂直居中的几种方法

CSS设置盒子垂直居中的几种方法将要实现的效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

骑猪看日落/ 2021年07月25日 15:17/ 0 赞/ 402 阅读