html如何让子div居中,如何在一个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{

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{

...

}