CSS水平垂直居中的幾種方法

css**：

div

img

src="prince.png">

div>
效果圖：
當乙個元素絕對定位時，它會根據第乙個不是static定位的祖先元素定位，因此這裡的img根據外層div定位。
css**：
.container
.inner

class="container">

class="inner">

這裡，我們首先用top:50%和left:50%讓inner的座標原點（左上角）移動到container的中心，然後再利用負margin讓它往左偏移自身寬的一半，再往上偏移自身高的一半，這樣inner的中心點就跟container的中心點對齊了。

css**：

div

img

src="prince.png">

div>
效果圖：
div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的。乙個有趣的事實是，當我們去掉img的vertical-align: middle之後，是這樣的：
還是居中啊！真的居中嗎？
我們看到，往上移了一點，在垂直方向上已經不居中了。為什麼？我也不知道，如果你知道，可以告訴我，不勝感激。
但是如果我們把換成文字：
css**：
divspan

這是放在span中的文字，通過外層div設定display: table-cell以及vertical-align: middle實現垂直居中。span>

div>
效果圖：
當我們把span的vertical-align: middle去掉之後是這樣的：
看到差別沒？文字的行間距更小了。如果你在自己電腦上執行**就會發現，這幾行字是向中間靠了，而並沒有像一樣往上移。我也在想辦法搞清楚這是怎麼回事，如果你知道原因，也煩請告訴我。
css**：
.container
.inner

class="container">

class="inner">
我在容器中水平垂直居中

align-items控制垂直方向的居中，justify-content控制水平方向的居中。這是css3的新屬性，瀏覽器支援情況如下：

以上！

CSS水平垂直居中的幾種方法

直接進入主題！css div imghtml 效果圖 當乙個元素絕對定位時，它會根據第乙個不是static定位的祖先元素定位，因此這裡的img根據外層div定位。css container inner html 效果圖 這裡，我們首先用top 50 和left 50 讓inner的座標原點 左上角 ...

CSS水平垂直居中的幾種方法

效果圖 當乙個元素絕對定位時，它會根據第乙個不是static定位的祖先元素定位，因此這裡的img根據外層div定位。css container inner html class container class inner 效果圖 這裡，我們首先用top 50 和left 50 讓inner的座標原點...

CSS水平垂直居中的幾種方法

css div imghtml div 效果圖 當乙個元素絕對定位時，它會根據第乙個不是static定位的祖先元素定位，因此這裡的img根據外層div定位。css container inner html class container class inner 效果圖 這裡，我們首先用top 50 ...