文档章节

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

黄复得
 黄复得
发布于 2013/08/08 09:53
字数 1816
阅读 687
收藏 12

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对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的水平居中和垂直居中就想讨论到这里。

本文转载自:http://xxling.com/blog/article/52.aspx

黄复得

黄复得

粉丝 15
博文 52
码字总数 6032
作品 0
福州
高级程序员
私信 提问
一起搞懂 CSS 水平居中与垂直居中的16个方法

一、水平居中 1.1 行内元素 1.2 块级元素 1.2.1 块级元素一般居中方法 1.2.2 子元素含 float 1.2.3 Flex 弹性盒子 1) flex 2012版 2)flex 2009版 1.2.4 绝对定位 1)transform 2)left: 5...

Agoreal
03/19
0
0
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
2018/05/11
0
0
元素居中的N种方式

水平居中 <1>行内元素的居中 被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 <2>块状元素的居中 当被设置元素为 块状元素 时用 text-align...

_YM雨蒙
2017/08/16
0
0
css实现水平、垂直居中的几种方法

用text-align: center来实现水平居中(只能实现文本的水平居中) //html<div class="center"> 文本水平居中</div>//css.center{width: 200px;height: 100px;background-color: #a036b4; text......

lironghua
2014/05/07
0
0
探究 HTML元素的水平垂直居中

HTML: <body> <div class="maxbox"> <div class="minbox align-center"></div> </div></body> 父元素 .maxbox{ position: relative; width: 500px; height: 500px; margin: 5px; box-shado......

我输过但从未怕过
2016/03/04
19
0

没有更多内容

加载失败,请刷新页面

加载更多

北斗三号IGSO-2卫星发射成功!

6月25日,中国航天科技集团官方公众号宣布,北斗三号IGSO-2卫星发射成功! 航天科技集团表示,6月25日2点09分,我国在西昌卫星发射中心用长征三号乙运载火箭成功将北斗三号第2颗倾斜地球同步...

linuxCool
6分钟前
0
0
阿里java开发规约的Idea插件安装(英文)

Idea Plugin Prepare Project JDK: 1.7+ Gradle: 3.0+(Require JDK1.8+ for gradle) Build cd p3c-ideagradle clean buildPlugin Run plugin cd p3c-ideagradle runIde# run speci......

Airship
16分钟前
0
0
很多人转行做程序员选择web前端学习,前端简单在哪里?

不管你是工人阶层还是服务行业,是否想过转行IT,转行IT后肯定会选择一门编程语言进行深入学习,很多转行的人基础都不是太好,不是科班出身,甚至有的是专科乃至中专,前端的HTML和CSS相对其...

智云编程
29分钟前
0
0
一文读懂内网、公网和NAT

我们做弱电监控系统的时候,都避免不了要跟IP地址打交道,比如摄像头、NVR、服务器等这些设备安装好之后,就需要给它们配上IP,那这个IP地址你了解嘛?今天我们就一起来聊聊什么是内网、公网和...

老孟的Linux私房菜
33分钟前
4
0
聊聊dubbo的ExecuteLimitFilter

序 本文主要研究一下dubbo的ExecuteLimitFilter ExecuteLimitFilter dubbo-2.7.2/dubbo-rpc/dubbo-rpc-api/src/main/java/org/apache/dubbo/rpc/filter/ExecuteLimitFilter.java public clas......

go4it
42分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部