【前端芝士樹(shù)】如何對(duì)元素塊實(shí)現(xiàn)居中（垂直和水平方向都居中）？

_Dreams 發(fā)布于2019-08-29 16:39 / 1585人閱讀

摘要：前端芝士樹(shù)如何對(duì)元素塊實(shí)現(xiàn)垂直居中水平居中和垂直居中是前端開(kāi)發(fā)過(guò)程中肯定會(huì)遇到的問(wèn)題，下面我講解幾種常見(jiàn)的方式。

【前端芝士樹(shù)】如何對(duì)元素塊實(shí)現(xiàn)垂直居中？

水平居中和垂直居中是前端開(kāi)發(fā)過(guò)程中肯定會(huì)遇到的問(wèn)題，下面我講解幾種常見(jiàn)的方式。

1/ 利用Flex布局來(lái)實(shí)現(xiàn)極速居中

The HTML

The CSS

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

2/ 絕對(duì)定位下，已知目標(biāo)元素寬高，利用CSS或者JS實(shí)現(xiàn)固定長(zhǎng)寬容器的居中

The HTML

.item{
    margin:0 auto;
    width:200px;
    height:200px;
}

2.1 margin 設(shè)為寬度的一半或者auto

.item{
    width:300px;
    height:200px;
    
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
    //或者 margin: auto;
}

2.2 使用jquery計(jì)算 left 和 top 的值

$(window).resize(function(){

    $(".item").css({
        position:"absolute",
        left: ($(window).width() - $(".item").outerWidth())/2,
        top: ($(window).height() - $(".item").outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

3/ Fixed定位下，利用margin:auto實(shí)現(xiàn)fixed元素的居中

The CSS

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

   width: 200px;
   height: 100px;
}

4/ 利用display: table-cell來(lái)實(shí)現(xiàn)居中

注意，父元素的寬度需要被定義，同時(shí)父元素的vertical-align以及item的margin: auto都是缺一不可的
The CSS

 .container {
    width: 400px;
    display: table-cell;
    vertical-align: middle;
}

.item {
    margin: 0 auto;
}

云服務(wù)器 GPU云服務(wù)器水平垂直居中實(shí)現(xiàn)垂直居中 html如何讓塊居中垂直居中

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

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

相關(guān)文章

【前端芝士樹(shù)】如何對(duì)元素塊實(shí)現(xiàn)居中（垂直和水平方向都居中）？

摘要：前端芝士樹(shù)如何對(duì)元素塊實(shí)現(xiàn)垂直居中水平居中和垂直居中是前端開(kāi)發(fā)過(guò)程中肯定會(huì)遇到的問(wèn)題，下面我講解幾種常見(jiàn)的方式。【前端芝士樹(shù)】如何對(duì)元素塊實(shí)現(xiàn)垂直居中？ showImg(https://segmentfault.com/img/bVbisNT?w=430&h=183); 水平居中和垂直居中是前端開(kāi)發(fā)過(guò)程中肯定會(huì)遇到的問(wèn)題，下面我講解幾種常見(jiàn)的方式。 1/ 利用Flex布局來(lái)實(shí)現(xiàn)極速居...

baoxl 2019-08-23 11:48 評(píng)論0 收藏0
【芝士整理】CSS經(jīng)典布局

摘要：水平居中行內(nèi)元素定寬塊元素常規(guī)流中浮動(dòng)塊元素負(fù)邊距絕對(duì)定位元素負(fù)邊距居中絕對(duì)居中不定寬塊元素完整垂直居中單行和一致定高塊元素負(fù)邊距居中絕對(duì)居中不定高塊元素完整水平垂直居中行內(nèi)元素水平居中行內(nèi)元素 text-align .parent { text-align: center; } 定寬塊元素常規(guī)流中 margin: 0 auto; .child { width: ...

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

摘要：水平居中內(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)元素垂直居中通過(guò)設(shè)置內(nèi)聯(lián)元素的高度和行高相等，從而使元素垂直居中。簡(jiǎn)言 CSS居中是前端工程師經(jīng)常要面對(duì)的問(wèn)題，也是基本技能之一。今天有時(shí)間把CSS居中的方案匯編整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15種。...

Apollo 2019-08-30 14:15 評(píng)論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

摘要：但是部分瀏覽器存在兼容性的問(wèn)題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹(shù) showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到...

cc17 2019-08-02 10:11 評(píng)論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

摘要：但是部分瀏覽器存在兼容性的問(wèn)題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹(shù) showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到...

AlienZHOU 2019-08-30 15:53 評(píng)論0 收藏0