這篇文章主要介紹了詳解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元素居中佈局的簡單方法" >
<p class="box">
<img src="img.png" / alt="詳解CSS元素居中佈局的簡單方法" ><span></span>
</p>.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中文網其他相關文章！
