詳解CSS元素居中佈局的簡單方法

這篇文章主要介紹了詳解CSS元素居中佈局的簡單方法,文中介紹了內嵌元素和塊元素以及行內塊三種情況,需要的朋友可以參考下

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

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

    [預設同行可以繼續跟同類型標籤]
    [內容撐開寬度]
    [不支援寬高]
    [不支援上下的margin和padding]
    [程式碼換行會解析成空]

    區塊元素（display:block ;）如p，p，h1-h6

    [預設獨佔一行顯示]
    [基本上支援所有的css指令]

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

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

那麼接下來我們依序將上面三種元素置中

一、內嵌元素之單行文字

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

line-height:200px;   
text-align:center;

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

二、區塊元素居中

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

width:100px;   
height:100px;   
position:relative;   
left:100px;   
top:100px;   
margin-left:-50px;   
margin-top:-50px;

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

三、行內塊居中

（1）把img轉換成背景圖片，然後用background-position:center;但是要注意的是由於圖片的連結通常是經常改變的，所以需要這樣做：

<img  style=”background-img:url(imgURL)” / alt="詳解CSS元素居中佈局的簡單方法" >

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

（2）輔助標籤

html程式碼：

<p class="box">  
    <img  src="img.png" / alt="詳解CSS元素居中佈局的簡單方法" ><span></span>  
</p>

#CSS程式碼：

.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}   
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}   
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}

##效果：

廢話：要讓img元素和輔助元素span在一行，否則會出現水平不完全居中，當使用inline-block時，換行會被解析成空格。其實網路上還有其他方法，比如說​​風靡已久的table法。網路上一大堆這裡就不顯擺了。

以上是詳解CSS元素居中佈局的簡單方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！