CSS元素居中布局的實(shí)現(xiàn)方法

本篇內(nèi)容主要講解“CSS元素居中布局的實(shí)現(xiàn)方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS元素居中布局的實(shí)現(xiàn)方法”吧!

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

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

    [默認(rèn)同行可以繼續(xù)跟同類型標(biāo)簽]
    [內(nèi)容撐開寬度]
    [不支持寬高]
    [不支持上下的margin和padding]
    [代碼換行會(huì)被解析成空]

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

    [默認(rèn)獨(dú)占一行顯示]
    [基本支持所有的css命令]

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

    [塊在一行顯示]
    [支持寬高]
    [沒(méi)有寬度時(shí)內(nèi)容撐開寬度]

那么接下來(lái)我們依次將上面三種元素居中

一、內(nèi)嵌元素之單行文本

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. line-height:200px;   

2. text-align:center;  

但是這種處理辦法就一定十全十美嗎？我不這么認(rèn)為（估計(jì)有人吐槽我強(qiáng)迫癥了）
反正我每次選中文字看到非文字區(qū)也被選中就很不爽，不過(guò)IE6-8只會(huì)選中文字

二、塊元素居中

解決辦法：使用定位元素+margin負(fù)值

CSS Code復(fù)制內(nèi)容到剪貼板

1. width:100px;   

2. height:100px;   

3. position:relative;   

4. left:100px;   

5. top:100px;   

6. margin-left:-50px;   

7. margin-top:-50px;  

缺點(diǎn)：要求必須知道盒子的寬高

三、行內(nèi)塊居中

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

CSS Code復(fù)制內(nèi)容到剪貼板

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

是不是違背了內(nèi)容樣式分離的原則。

（2）輔助標(biāo)簽

html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div class="box">  

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

3. </div>  

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

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;}  

效果：

到此，相信大家對(duì)“CSS元素居中布局的實(shí)現(xiàn)方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！