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

2021-07-27 23:47:41 字數 1863 閱讀 2021

效果圖:

當乙個元素絕對定位時,它會根據第乙個不是static定位的祖先元素定位,因此這裡的img根據外層div定位。

css**:

.container

.inner

html**:

class="container">

class="inner">

效果圖:

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

效果圖:

div上面的vertical-align: middle是控制垂直方向上的居中的,而text-align: center是控制水平方向的。乙個有趣的事實是,當我們去掉img的vertical-align: middle之後,是這樣的:

還是居中啊!真的居中嗎?

我們看到,往上移了一點,在垂直方向上已經不居中了。為什麼?我也不知道為什麼,如果你知道,可以告訴我嗎?

但是如果我們把換成文字:

css**:

divspan

html**:

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

div>

效果圖:

當我們把span的vertical-align: middle去掉之後是這樣的:

看到差別沒?文字的行間距更小了。如果你在自己電腦上執行**就會發現,這幾行字是向中間靠了,而並沒有像一樣往上移。我也在想辦法搞清楚這是怎麼回事,如果你知道原因,也煩請告訴我。

css**:

.container

.inner

html**:

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水平垂直居中的幾種方法

css div imghtml src prince.png div 效果圖 當乙個元素絕對定位時,它會根據第乙個不是static定位的祖先元素定位,因此這裡的img根據外層div定位。css container inner html class container class inner 效果圖 ...

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

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