CSS元素居中布局的實現方法

本篇內容主要講解“CSS元素居中布局的實現方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS元素居中布局的實現方法”吧!

首先我們需要知道元素都有哪些種類？

    內嵌元素（display:inline;）如a，span，b，i 【一個不可定制的盒子】

    [默認同行可以繼續跟同類型標簽]
    [內容撐開寬度]
    [不支持寬高]
    [不支持上下的margin和padding]
    [代碼換行會被解析成空]

    塊元素（display:block;）如div，p，h2-h7

    [默認獨占一行顯示]
    [基本支持所有的css命令]

    行內塊（display:inline-block;）如img 【img就是這么一個神奇的東東。它既不是內嵌又不是塊，而是行內塊】

    [塊在一行顯示]
    [支持寬高]
    [沒有寬度時內容撐開寬度]

那么接下來我們依次將上面三種元素居中

一、內嵌元素之單行文本

最最常見的解決辦法就是使用text-align和line-height

CSS Code復制內容到剪貼板

1. line-height:200px;   

2. text-align:center;  

但是這種處理辦法就一定十全十美嗎？我不這么認為（估計有人吐槽我強迫癥了）
反正我每次選中文字看到非文字區也被選中就很不爽，不過IE6-8只會選中文字

二、塊元素居中

解決辦法：使用定位元素+margin負值

CSS Code復制內容到剪貼板

1. width:100px;   

2. height:100px;   

3. position:relative;   

4. left:100px;   

5. top:100px;   

6. margin-left:-50px;   

7. margin-top:-50px;  

缺點：要求必須知道盒子的寬高

三、行內塊居中

（1）把img轉化為背景圖片，然后用background-position:center;但是需要注意的是由于圖片的鏈接一般都是經常改變的，所以需要這樣做：

CSS Code復制內容到剪貼板

1. <img style=”background-img:url(imgURL)” />  

是不是違背了內容樣式分離的原則。

（2）輔助標簽

html代碼：

XML/HTML Code復制內容到剪貼板

1. <div class="box">  

2.     <img src="img.png" /><span></span>  

3. </div>  

CSS代碼：

CSS Code復制內容到剪貼板

1. .box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}   

2. .box img{vertical-align:middle;border:1px solid #999;padding:2px;}   

3. .box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}  

效果：

到此，相信大家對“CSS元素居中布局的實現方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！