CSS的水準居中和垂直居中解決方案

在寫CSS樣式的時候，有時為了美觀，會添加水準居中和垂直居中，這時候你有可能會遇到很棘手的問題，有些水準居中和垂直居中的屬性添加上去完全沒反應，下面給大家列舉一些CSS水準居中和垂直居中的終極解決方案：

一、CSS的水準居中

css水準居中有大緻有以下三種情況：

1.文本、圖檔等行内元素：

給父元素添加屬性：text-align:center;

2.确定寬度的塊級元素：

添加屬性：margin-left:auto;margin-right:auto;

3.不确定寬度的塊級元素：

有三種處理方法：

a.把塊級元素display:inline;變成行内元素，然後使用text-align:center實作。

b.把塊級元素包含在table裡，然後對table添加屬性margin-left:auto;margin-right:auto;

c.給父元素設定float，然後給父元素設定position:relative;left:50%，子元素設定position:relative;left:-50%。

二、CSS的垂直居中

css垂直居中也大緻有三種情況：

1.父元素高度确定，單行文本：

可以設定line-hight值等于其高度值實作；

2.父元素高度确定的多行文本、圖檔：

兩種處理方法：

a.将它們包含在table标簽中，td标簽預設擁有屬性vertical-align:middle;

3.父元素高度不确定的文本、圖檔：