css實現水平居中和垂直居中及其瀏覽器兼容性

時間  2019-11-06
標籤 css 實現 水平 居中 垂直 及其 瀏覽器 兼容性 欄目 CSS 简体版
原文   原文鏈接

無論是在網站的佈局仍是顯示圖片，須要水平居中和垂直居中的狀況是很常見的。今天咱們就開始對css的水平居中和垂直居中的一些常見方法在各類瀏覽器下進行測試和概括。 css

瀏覽器說明：本文涉及到的瀏覽器及其版本以下（下文涉及到沒有寫版本號的均以此爲準）：
IE7
IE8 標準版
IE9 標準版
FireFox 13.01
Chrome  20.0.1132.47
Safari  5.1.7(7534.57.2)
Opera   12 html

居中元素：分爲圖片(img)和非圖片(div)兩種，若要親自檢測請將圖片的src改爲一個可用連接進行，寫此文時用#號替換掉了。 express

1、水平居中 瀏覽器

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 spa

img: IE7 IE8 IE9 FireFox Chrome Safari Opera code

注：若是父元素設置了float:left;那麼text-align:center;將無效。 htm

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. 對一、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

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

2、垂直居中

相對於水平居中，垂直居中就沒那麼容易了，下面咱們仍是分各類方法依次進行測試。

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

以上就是垂直居中的方法

3、總結

1. 對於div咱們可讓它居中併兼容全部測試瀏覽器的有：

水平居中：2,3,4

垂直居中：1

2. 對於img咱們可讓它居中併兼容全部測試瀏覽器的有：

水平居中：1,3,4

垂直居中：1,4

有以上結果咱們能夠看出若是知道元素的高寬就用水平中的4和垂直中的1來實現水平垂直居中是個不錯的選擇。

若是咱們不知道元素的高寬那麼就比較麻煩些了，固然咱們依然能夠選擇一個水平居中和一個垂直的居中的方法結合使用，好比對於圖片咱們可選擇水平1和垂直4組合進行實現，但缺點就是多加一個元素了。

對於居中還有其餘的一些方法如淘寶的font-size方法和經過css中的express去執行居中的語句等等。對於背景居中直接設置background的center屬性便可。

好吧，關於css的水平居中和垂直居中就想討論到這裏。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程