如何在一個div中使其子div居中的5種方式
阿新 • • 發佈:2019-01-29
第一種
基於絕對定位,要求有固定的寬高
main{
position: absolute;
top: 50%;
left: 50%;
margin-top: -5em;
margin-left: -9em;
width: 18em;
height: 10em;
}
使用calc方法對第一種進行簡化
main{
position: absolute;
top: calc(50% - 5em);
left: calc(50% - 9em);
width: 18em;
height: 10em;
}
第二種
在translate變形函式中使用百分比, 不依賴固定寬高
缺點:
1. 有時候不能使用絕對定位
2. 如果需喲啊居中的元素已經在高度上超過了視口, 那麼他的頂部會被視口裁剪掉
3. 在某些瀏覽器中,這個方法肯會導致元素的顯示有一些模糊,因為元素可能被放置在半個 畫素上。
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
}
第三種
基於視口單位vh
main{ margin: 50vh auto; transform: translateY(-50%); width: 18em; }
為什麼不能以下程式碼來做那?
margin: 50% auto 0 ;
transform: translateY(-50%);
因為margin的百分比值是以父元素的寬高來做解析基準的
第四種
基於Flexbox解決方案-最佳解決方案,只需要考慮flex
main{
margin: auto;
}
body{
display: flex;
min-height: 100vh;
}
第五種
在有寬高的父級下居中
html{ height: 100%; } body{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } main{ ... }