在構建網站時將圖片，文字和塊元素居中
如果您正在學習如何構建網站 ，您需要掌握的最常用的技巧之一是如何將項目放在瀏覽器窗口中。 這可能意味著將圖像置於頁面中心，或者可能將標題中心化為文本，如標題作為設計的一部分。
通過使用層疊樣式表（CSS） ，完成居中圖像或文本或甚至整個網頁的視覺外觀的正確方法。 大多數用於居中的屬性都是在1.0版本以後的CSS中使用的，並且它們在CSS3和現代Web瀏覽器中運行良好 。
像網頁設計的許多方面一樣，有多種方式可以使用CSS來將網頁中的元素居中。 讓我們來看看使用CSS實現這種視覺效果的一些不同方式。
關於在HTML中使用CSS來居中元素的概述
以CSS為中心對於網頁設計師來說可能是一個挑戰，因為有很多不同的方法來完成這一個視覺風格。 雖然各種各樣的方法可能是好的或經驗豐富的網絡開發人員，他們知道並非所有技術都適用於每一個元素，但對於較新的網絡專業人員來說，這可能是非常具有挑戰性的，因為各種各樣的方法意味著他們需要知道何時使用哪種方法。 最好的辦法是了解一些方法。 當您開始使用它們時，您將了解哪種方法在哪些情況下效果最好。
在較高的層面上，您可以使用CSS來：
- 中心文字
- 居中塊級元素（如分區）
- 居中圖像
- 垂直居中塊或圖像
很多（很多年前），網頁設計師可以使用
用CSS居中文本
以網頁為中心的最簡單的事情就是文字。 您只需要知道一個樣式屬性即可：text-align。 以下面的CSS樣式為例：
p.center {text-align：center; }
通過這一行CSS，每個用中心類書寫的段落將在其父元素內水平居中。 例如，如果段落在一個分區內，意味著它是該分區的一個子分區，它將水平居中放置在
下面是在HTML文檔中應用的這個類的一個例子：
這段文字居中。
當使用text-align屬性居中文本時，請記住它將在其包含元素中居中，而不一定居中於整個頁面本身。 還要記住，對於大塊內容，居中對齊的文本可能很難閱讀，所以請謹慎使用此樣式。 標題和小塊文本（如文章或其他內容的傳情文本）在居中時通常易於閱讀和良好處理，但如果內容完全居中，則較大的文本塊（如整篇文章本身）將難以消費有道理的。 請記住， 可讀性始終是網站文本的關鍵 ！
用CSS集中內容塊
塊是頁面上具有定義寬度的任何元素，並且被建立為塊級元素。 通常，這些塊是通過使用HTML
div.center {
保證金：0汽車;
寬度：80em;
}
此邊界屬性的CSS速記將設置頂部和底部邊距為0，而左側和右側將使用“自動”。 這基本上佔用了任何可用的空間，並在視口窗口的兩側均勻分配，有效地將頁面上的元素居中。
在這裡它被應用在HTML中：
但它內部的文本是左對齊的。
只要你的塊有一個定義的寬度，它將自己居中在包含元素內。 該塊中包含的文本不會居中，但會左對齊。 這是因為Web瀏覽器中的默認文本是左對齊的。 如果你想讓文本居中，你可以使用我們前面介紹的文本對齊屬性和這個方法一起來分割居中。
用CSS居中圖像
儘管大多數瀏覽器都會使用我們已經查看過的段落來顯示圖片，但是依靠這種技術並不是一個好主意，因為W3C不建議這樣做 。 由於不推薦，因此未來版本的瀏覽器總有可能選擇忽略此方法。
您應該明確地告訴瀏覽器該圖像是塊級元素，而不是使用文本對齊來居中放置圖像。 這樣，您可以像對待任何其他塊一樣將其居中。 這是CSS來實現這一點：
img.center {
顯示：塊;
margin-left：auto;
margin-right：auto;
}
以下是我們希望以圖片為中心的HTML代碼：
您也可以使用內嵌CSS對齊對象（請參見下文），但不建議使用此方法，因為它將可視樣式添加到HTML標記中。 請記住，我們希望分離樣式和結構，因此在HTML代碼中添加CSS樣式並打破分隔，因此應盡可能避免。
使用CSS垂直居中元素
垂直居中對像在網頁設計中一直是一個挑戰，但隨著CSS3中CSS靈活框佈局模塊的發布，現在有辦法做到這一點。
垂直對齊與上面所述的水平對齊類似。 CSS屬性與中間值垂直對齊。
.vcenter {
vertical-align：middle;
}
這種方法的缺點是並不是所有的瀏覽器都支持CSS FlexBox，儘管越來越多的瀏覽器正在使用這種新的CSS佈局方法！ 事實上，今天所有的現代瀏覽器現在都支持這種CSS風格。 這意味著您對Flexbox的唯一擔憂就是瀏覽器版本會更老。
如果您在舊版瀏覽器中遇到問題，W3C建議您使用以下方法在容器中垂直放置文本：
- 將元素放置在包含元素（例如div）中。
- 在包含元素上設置最小高度。
- 將包含元素聲明為表格單元格。
- 將垂直對齊設置為“中間”。
例如，這裡是CSS：
.vcenter {
最小高度：12em;
display：table-cell;
vertical-align：middle;
}
這裡是HTML：
此文字在框中垂直居中。
垂直居中和舊版本的Internet Explorer
有一些方法可以強制Internet Explorer（IE）居中，然後使用條件註釋，以便只有IE才能看到樣式，但它們有點冗長和難看。 好消息是，隨著微軟最近決定放棄對老版本IE的支持，那些不支持的瀏覽器應該很快就會出來，這樣網頁設計師就可以更容易地使用CSS FlexBox等現代佈局方法，這將使所有的CSS佈局，不只是集中，更容易為所有網頁設計師。