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

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

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

云知道上下居中


子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;；
子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2；
例子<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.father {position: relative;}
.son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px;
}
</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>方法四（定位）理念：
定位屬性top和bottom（或是left和right）值分別設(shè)置為0，但子div有固定高度（寬度），并不能達(dá)到上下（左右）間距為0，此時(shí)給子div設(shè)置margin:auto會(huì)使它居中顯示 。
步驟：
父div標(biāo)記下定位（position:relative|absolute|fixed|sticky）;子div絕對(duì)定位（position:absolute）
子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto
子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto
例子<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.father {position: relative;}
.son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}
</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>方法五（flex）理念
彈性盒子，自帶的一個(gè)居中功能
例子<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
.father {display: flex; align-items: center}
.son {margin: auto}
</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>
flex兼容性，以及存在的已知問(wèn)題
結(jié)尾
方法二和方法三兼容性要比其它好些
參考資料
Can I usecss-vertical-center-solutionCSS實(shí)現(xiàn)垂直居中的5種方法–前端觀(guān)察
(今完)

推薦閱讀