1. 技术文章
  2. css实现水平居中和垂直居中及其浏览器兼容性

css实现水平居中和垂直居中及其浏览器兼容性

由 a 夏天 提交于 2019-12-03 14:25:44

不管是在网站的布局还是显示图片，需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。

浏览器说明：本文涉及到的浏览器及其版本如下（下文涉及到没有写版本号的均以此为准）：
IE7
IE8 标准版
IE9 标准版
FireFox 13.01
Chrome  20.0.1132.47
Safari  5.1.7(7534.57.2)
Opera   12

居中元素：分为图片(img)和非图片(div)两种，若要亲自检测请将图片的src改成一个可用链接进行，写此文时用#号替换掉了。

一、水平居中

1. text-align:center

代码如下： 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .h-align{ text-align:center;}
    </style>
</head>
<body>
    <div class="container h-align">
        <div class="box"></div>
    </div>
    <div class="container h-align">
        <img width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

兼容性如下：

div: IE7

img: IE7 IE8 IE9 FireFox Chrome Safari Opera

注：如果父元素设置了float:left;那么text-align:center;将无效。

2. margin:auto

代码如下： 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .h-align{ margin:auto;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box h-align"></div>
    </div>
    <div class="container">
        <img class="h-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

兼容性如下：

div: IE7 IE8 IE9 FireFox Chrome Safari Opera

img: none

3. 对1、2进行修改测试

有上面1和2我们看到对多数浏览器text-align:center;只对img（默认inline-block）生效，而margin:auto只对div（默认block）生效，那这次我们试着将img设置为block，将div设置为inline-block再进行测试看看。

代码如下 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green;}
        .box{ width:120px; height:90px; border:1px solid Green; display:inline-block;}
        .h-align-div{ text-align:center;}
        .h-align-img{ margin:auto auto; display:block;}
    </style>
</head>
<body>
    <div class="container h-align-div">
        <div class="box"></div>
    </div>
    <div class="container">
        <img class="h-align-img" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

兼容性如下：

div: IE7 IE8 IE9 FireFox Chrome Safari Opera

img: IE7 IE8 IE9 FireFox Chrome Safari Opera

由上面的结果可以看出，text-align:center;和margin:auto主要是看元素的display属性。

4.已知宽度的绝对定位

从几何的角度，我们可以想到，从父元素的中点开始往左挪动需要居中元素的1/2宽，即可让元素居中。

代码如下： 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .h-align{ position:absolute; left:50%; margin-left:-60px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box h-align"></div>
    </div>
    <div class="container">
        <img class="h-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

兼容性如下：

div: IE7 IE8 IE9 FireFox Chrome Safari Opera

img: IE7 IE8 IE9 FireFox Chrome Safari Opera

5.未知宽度的绝地定位（left:0; right:0; margin:auto;）

此方法用了绝对定位和margin,左右设为0让浏览器无法决定具体位置而居中，但此方法中的左右为0和margin缺一都不可。

代码如下： 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .h-align{ position:absolute; left:0; right:0; margin:auto;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box h-align"></div>
    </div>
    <div class="container">
        <img class="h-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

兼容性如下：

div: IE8 IE9 FireFox Chrome Safari Opera

img: IE8 IE9 FireFox Chrome Safari Opera

以上就是各种水平居中的方法。

二、垂直居中

相对于水平居中，垂直居中就没那么容易了，下面我们还是分各种方法依次进行测试。

1. 已知高度绝对定位

具体原理见水平居中对应的方法4。

代码如下： 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .v-align{ position:absolute; top:50%; margin-top:-45px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box v-align"></div>
    </div>
    <div class="container">
        <img class="v-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

兼容性如下：

div: IE7 IE8 IE9 FireFox Chrome Safari Opera

img: IE7 IE8 IE9 FireFox Chrome Safari Opera

2. table-cell方法

我们知道在table中，要让里面元素水平居中和垂直居中都是很容易的，那么这次我们就通过设置父元素的display属性为table-cell来实现垂直居中。

代码如下： 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .v-align{ display:table-cell; vertical-align:middle;}
    </style>
</head>
<body>
    <div class="container v-align">
        <div class="box"></div>
    </div>
    <div class="container v-align">
        <img class="" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

兼容性如下：

div: IE8 IE9 FireFox Chrome Safari Opera

img: IE8 IE9 FireFox Chrome Safari Opera

3.未知高度绝对定位

此方法对于水平居中的方法5。

代码如下： 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .v-align{ position:absolute; top:0; bottom:0; margin:auto;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box v-align"></div>
    </div>
    <div class="container">
        <img class="v-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

兼容性如下：

div: IE8 IE9 FireFox Chrome Safari Opera

img: IE8 IE9 FireFox Chrome Safari Opera（在这Opera浏览器升级到该版本之前是不行，测试那天刚好碰上升级）

4. 未知高度inline-block方法

我们知道，对img元素我们设置vertical-align:middle;可让它在左边或右边的文字居中，受到这个启发，我们将要居中的元素设置为inline-block，并再添加一个inline-block的元素然后设置高度为100%和垂直居中来让居中的元素居中。

代码如下： 

<!DOCTYPE>
<html >
<head>
    <title>居中测试</title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green;}
        .box{display:inline-block;  width:120px; height:90px; border:1px solid Green;}
        .v-align{ display:inline-block; height:100%; vertical-align:middle;}
        .v-middle{vertical-align:middle;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box v-middle"></div>
        <b class="v-align"></b>
    </div>
    <div class="container">
        <img class="v-middle" width="120px" height="90px" src="#" alt="" />
        <b class="v-align"></b>
    </div>
</body>
</html>

兼容性：

div: IE8 IE9 FireFox Chrome Safari Opera

img: IE7 IE8 IE9 FireFox Chrome Safari Opera

以上就是垂直居中的方法

三、总结

1. 对于div我们可以让它居中并兼容所有测试浏览器的有：

水平居中：2,3,4

垂直居中：1

2. 对于img我们可以让它居中并兼容所有测试浏览器的有：

水平居中：1,3,4

垂直居中：1,4

有以上结果我们可以看出如果知道元素的高宽就用水平中的4和垂直中的1来实现水平垂直居中是个不错的选择。

如果我们不知道元素的高宽那么就比较麻烦些了，当然我们依然可以选择一个水平居中和一个垂直的居中的方法结合使用，比如对于图片我们可选择水平1和垂直4组合进行实现，但缺点就是多加一个元素了。

对于居中还有其他的一些方法如淘宝的font-size方法和通过css中的express去执行居中的语句等等。对于背景居中直接设置background的center属性即可。

好吧，关于css的水平居中和垂直居中就想讨论到这里。

标签
margin
垂直居中
html居中
html代码
绝对定位
border
css
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!