国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

<del id="caw2w"></del>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/CSS3 垂直居中詳解

CSS3 垂直居中詳解

DTeam 發(fā)布于2019-08-29 11:09 / 1000人閱讀

摘要：但要實(shí)現(xiàn)垂直居中確是一大難題。彈性盒子絕對定位視口單位彈性盒子彈性盒子應(yīng)該是解決垂直居中的最佳方案，隨著的逐漸沒落，惹人煩的兼容性問題正逐漸被克服。里有一個(gè)和一個(gè)，想將這兩個(gè)元素在里垂直居中，同樣只需給它們的父元素設(shè)和。

CSS里實(shí)現(xiàn)水平居中非常容易，inline元素用text-align:center;，block元素用margin:auto;就行了。但要實(shí)現(xiàn)垂直居中確是一大難題。本篇收集了一些已知的方案，整理出來，以備將來取用。代碼可以從GitHub上下載。

Flex彈性盒子
absolute絕對定位
vh視口單位
Flex彈性盒子
Flex彈性盒子應(yīng)該是解決垂直居中的最佳方案，隨著IE10的逐漸沒落，惹人煩的兼容性問題正逐漸被克服。用法很簡單，給需要垂直居中的元素的父容器設(shè)置display:flex，并指定align-items: center;就搞定了：

body {

…
display: flex;
align-items: center;

}
main {

…
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

}

用flex實(shí)現(xiàn)
垂直居中

我們想將main垂直居中，只需給它的父元素body設(shè)display:flex;和align-items: center;即可。main里有一個(gè)div和一個(gè)p，想將這兩個(gè)元素在main里垂直居中，同樣只需給它們的父元素main設(shè)display:flex;和align-items: center;。另外justify-content和flex-direction用于調(diào)整這兩個(gè)子元素水平居中的排列順序。

absolute絕對定位
一種很常見的方法是用絕對定位配合負(fù)值margin。思路是設(shè)成absolute后，指定top和left為50%，將元素的左上角定位點(diǎn)放到頁面正中心。然后用負(fù)值margin一半的元素寬高度將元素拉回頁面正中心：

main {

position: absolute;
width: 18em;
height: 10em;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -5em;
…

}
但缺點(diǎn)是你需要事先指定元素的width和height，否則無法給負(fù)margin設(shè)值，顯得不夠靈活。其實(shí)不必固定元素的寬高，改用translate()位移來替代負(fù)margin，實(shí)現(xiàn)將元素拉回頁面正中心：（如果對變形元素不熟，可以參照CSS3 transform介紹）

main {

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
…

}

用absolute實(shí)現(xiàn)
垂直居中

用絕對定位absolute讓需要垂直居中的元素脫離文檔流，指定top和left各50%將元素左上角定位點(diǎn)設(shè)到頁面正中心。然后用translate()各負(fù)50%，將元素拉回頁面正中心。思路和負(fù)margin是一致的，優(yōu)勢是不必固定元素的寬高了。缺點(diǎn)是absolute絕對定位威力太大，要考慮是否會對頁面布局造成影響。

vh視口單位
上例中translate()將元素回拉的前提是，absolute絕對定位來設(shè)top和left各50%。但如果看到absolute絕對定位就覺得不舒服，可以改成vh視口單位來設(shè)元素左上角的定位點(diǎn)。

vh就是視口高度，vw是視口寬度。例如1vh表示視口高度的1%。

vmin是視口寬高的小值，例如vh

vmax是視口寬高的大值，例如vh

所以我們可以用vh替代absolute絕對定位：

main {

width: 9em;
margin: 50vh auto 0;
transform: translateY(-50%);
…

}

用vh實(shí)現(xiàn)
垂直居中

因?yàn)槿サ袅薬bsolute，失去了包裹性，所以需要指定width大小。margin-top設(shè)為50vh，表示視口高度的50%位置。然后用translateY(-50%)將元素拉上去。之所以用translateY因?yàn)樗轿恢靡呀?jīng)指定margin為auto實(shí)現(xiàn)了居中，所以水平位置不用回拉