如何在⼀个div中使其⼦div居中的5种⽅式
第⼀种
基于绝对定位，要求有固定的宽⾼
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{
div中的div居中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{
...
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。