margin中auto為什么可以實(shí)現(xiàn)垂直居中

發(fā)布時(shí)間：2021-12-10 10:59:31 來(lái)源：億速云閱讀：264 作者：柒染欄目：大數(shù)據(jù)

本篇文章為大家展示了margin中auto為什么可以實(shí)現(xiàn)垂直居中，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

margin概念

margin屬性為給定元素設(shè)置所有四個(gè)（上下左右）方向的外邊距屬性。這是四個(gè)外邊距屬性設(shè)置的簡(jiǎn)寫(xiě)。四個(gè)外邊距屬性設(shè)置分別是：margin-top，margin-right，margin-bottom和margin-left。指定的外邊距允許為負(fù)數(shù)。

margin的top和bottom屬性對(duì)非替換內(nèi)聯(lián)元素?zé)o效，例如span和 code。

為什么能實(shí)現(xiàn)垂直居中

塊狀水平元素，如div元素（下同），在默認(rèn)情況下（非浮動(dòng)、絕對(duì)定位等），水平方向會(huì)自動(dòng)填滿(mǎn)外部的容器；如果有margin-left/margin-right,padding-left/padding-right等，實(shí)際內(nèi)容區(qū)域會(huì)相應(yīng)變窄。

當(dāng)一個(gè)絕對(duì)定位元素，其對(duì)立定位方向?qū)傩酝瑫r(shí)有具體定位數(shù)值的時(shí)候，流體特性就發(fā)生了。具有流體特性絕對(duì)定位元素的margin:auto的填充規(guī)則和普通流體元素一模一樣，含有以下特性：

如果一側(cè)定值，一側(cè)auto，auto為剩余空間大小；
如果兩側(cè)均是auto, 則平分剩余空間

因此，margin : auto 可以實(shí)現(xiàn)垂直居中。

實(shí)現(xiàn)垂直居中代碼

想要實(shí)現(xiàn)垂直方向的居中可以用絕對(duì)定位：

div {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
   }

上述內(nèi)容就是margin中auto為什么可以實(shí)現(xiàn)垂直居中，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

margin中auto為什么可以實(shí)現(xiàn)垂直居中

為什么能實(shí)現(xiàn)垂直居中

實(shí)現(xiàn)垂直居中代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽