css實(shí)現(xiàn)水平垂直居中的4種方法

hearaway 發(fā)布于2019-08-29 18:32 / 1998人閱讀

摘要：結(jié)構(gòu)已知元素的寬度和高度設(shè)置為自身高度的一半這個(gè)方法可以實(shí)現(xiàn)自適應(yīng)未知元素的高度和寬度使用的來實(shí)現(xiàn)注意這里需要設(shè)置高度來查看垂直居中效果

html結(jié)構(gòu)：

1. 已知元素的寬度和高度：

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px; /* 設(shè)置margin-left / margin-top 為自身高度的一半 */
    margin-left: -75px;
}

.item {
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

/* 這個(gè)方法可以實(shí)現(xiàn)自適應(yīng) */

2. 未知元素的高度和寬度：

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 使用css3的transform來實(shí)現(xiàn) */
}

.parent {
    display: flex;
    justify-content:center;
    align-items: center;
    background: #AAA;
    height: 300px;   /* 注意這里需要設(shè)置高度來查看垂直居中效果 */
}

GPU云服務(wù)器云服務(wù)器水平垂直居中實(shí)現(xiàn)垂直居中 html的水平居中三種實(shí)現(xiàn)方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114396.html

相關(guān)文章

CSS垂直居中，你會(huì)多少種寫法？

摘要：如果我們直接可以計(jì)算出正確的和值，豈不是一次到位函數(shù)正有此功能，當(dāng)然我們需要知道子元素的寬高效果是一個(gè)作用于內(nèi)聯(lián)元素的屬性。內(nèi)聯(lián)元素的特性是會(huì)和其它內(nèi)聯(lián)元素或者文字在同一行顯示，但是默認(rèn)情況下是與父元素基線對(duì)齊的。 ??CSS控制居中是前端開發(fā)中非常常用的布局技能，本文列出幾種CSS控制元素居中的幾種方法。??談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...

caohaoyu 2019-08-29 18:43 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對(duì)的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對(duì)的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Scholer 2019-08-02 16:14 評(píng)論0 收藏0
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

摘要：水平居中內(nèi)聯(lián)元素水平居中利用可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素內(nèi)聯(lián)塊內(nèi)聯(lián)表元素水平居中都有效。核心代碼演示程序演示代碼垂直居中單行內(nèi)聯(lián)元素垂直居中通過設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡言 CSS居中是前端工程師經(jīng)常要面對(duì)的問題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

mayaohua 2019-08-29 18:44 評(píng)論0 收藏0
16種水平居中垂直居中方法

摘要：原文鏈接水平居中若是行內(nèi)元素給其父元素設(shè)置即可實(shí)現(xiàn)行內(nèi)元素水平居中若是塊級(jí)元素該元素設(shè)置即可若子元素包含屬性為了讓子元素水平居中則可讓父元素寬度設(shè)置為并且配合作如下設(shè)置是中給屬性新加的一個(gè)屬性值它配合可以輕松實(shí)現(xiàn)水平居中原文鏈接水平居中 1) 若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.2) 若是塊級(jí)元素, 該元素設(shè)置 margin...

jerry 2019-08-30 15:54 評(píng)論0 收藏0
CSS實(shí)現(xiàn)水平垂直居中的1010種方式（史上最全）

摘要：劃重點(diǎn)，這是一道面試必考題，很多面試官都喜歡問這個(gè)問題，我就被問過好幾次了要實(shí)現(xiàn)上圖的效果看似很簡單，實(shí)則暗藏玄機(jī)，本文總結(jié)了一下實(shí)現(xiàn)水平垂直居中的方式大概有下面這些，本文將逐一介紹一下，我將本文整理成了一個(gè)倉庫，歡迎大家僅居中元素定寬高適劃重點(diǎn)，這是一道面試必考題，很多面試官都喜歡問這個(gè)問題，我就被問過好幾次了 showImg(https://segmentfault.com/im...

YuboonaZhang 2019-08-29 16:45 評(píng)論0 收藏0