日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

上下居中對(duì)齊 上下居中

云知道上下居中


上下居中對(duì)齊 上下居中


內(nèi)容導(dǎo)讀
當(dāng)父div的行高等于自身高度時(shí)，內(nèi)部的行內(nèi)元素會(huì)上下居中顯示 。行內(nèi)塊沒(méi)有固定高度時(shí)也會(huì)上下居中顯示 。所以需要對(duì)父div的 line-height 進(jìn)行調(diào)整 。利用定位屬性（top、left、right、bottom）百分比的模式 。若為100%，則代表偏移的長(zhǎng)度為父div的高度（寬度）的100% 。定位屬性top和bottom（或是left和right）值分別設(shè)置為0，但子div有固定高度（寬度），并不能達(dá)到上下（左右）間距為0，此時(shí)給子div設(shè)置 margin:auto 會(huì)使它居中顯示 。
轉(zhuǎn)載自喜歡JS的無(wú)名小站
例如 一個(gè)父div(w:100%;h:400px)中有一個(gè)子div(w:100px;100px;) 。讓其上下左右居中 。
方法一（varticle-align）理念
利用表格單元格的居中屬性 。
步驟
父div外層配置一個(gè)div，同時(shí)設(shè)置為表格元素 (display: table)，寬度為100%
父div配置為表格單元格元素 (display: table-cell)
父div配置居中屬性（vertical-align: middle），使子div上下居中
子div通過(guò)margin配置左右居中（margin-left:auto; margin-right:auto）
例子<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.table {display: table; width: 100%;}
.father {display: table-cell; vertical-align: middle;}
.son {margin: auto;}
</style>
<body>
<div class=\”table\” >
<div class=\”father\” style=\”width: 100%; height: 400px; border: 1px solid rebeccapurple;\”>
<div class=\”son\” style=\”width: 100px; height: 100px;background: palegreen;\”></div>
</div>
</div>
</body>
注：
表格單元格比較特殊，如果只有一個(gè)單元格時(shí)，它的寬度默認(rèn)會(huì)占父級(jí)（table|tr）寬度的100%;
table默認(rèn)寬度不會(huì)撐開，需要手動(dòng)配置width:100%；
方法二(line-height)理念
當(dāng)父div的行高等于自身高度時(shí)，內(nèi)部的行內(nèi)元素會(huì)上下居中顯示 。行內(nèi)塊沒(méi)有固定高度時(shí)也會(huì)上下居中顯示 。通過(guò)文本居中屬性text-align:center,可以使內(nèi)部行內(nèi)元素或行內(nèi)塊元素左右居中顯示 。
步驟
子div設(shè)定為行內(nèi)塊元素(display:inline-block)；
父div設(shè)置行高(line-height)使子div上下居中
父div設(shè)置文本居中(text-align:center)使子div左右居中 。
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.father {line-height: 500px; text-align: center; font-size: 0;}
.son { display: inline-block;
/* display: inline-flex;
display: inline-grid;
display: inline-table; */
}
</style>
<body>
<div class=\”father\” style=\”width: 100%; height: 400px; border: 1px solid rebeccapurple;\”>
<div class=\”son\” style=\”width: 100px; height: 100px;background: palegreen;\”></div>
</div>
</body>
注： 行高如果設(shè)置為當(dāng)前父div的高度(400px)的話，有固定高度的子div并不會(huì)居中顯示的，問(wèn)題出在瀏覽器默認(rèn)將其當(dāng)做文本居中的，即把它當(dāng)做了一段文本（chrome默認(rèn)font-size:16px;hight:21px）進(jìn)行居中，沒(méi)把它當(dāng)做高度100px進(jìn)行居中 。所以需要對(duì)父div的line-height進(jìn)行調(diào)整 。以font-size:0（對(duì)應(yīng)的字體高度為0）為例子，則需要line-height增加一個(gè)子div的高度（400px + 100px;） 。
方法三（定位）理念
利用定位屬性（top、left、right、bottom）百分比的模式 。若為100%，則代表偏移的長(zhǎng)度為父div的高度（寬度）的100% 。
【上下居中對(duì)齊 上下居中】步驟
父div標(biāo)記下定位（position:relative|absolute|fixed）;子div絕對(duì)定位（position:absolute）

推薦閱讀