如何在一个div中使其子div居中的5种方式

川长思鸟来 2022-05-24 13:18 207阅读 0赞

## ![70][] ##

[demo地址-codepen][demo_-codepen]

## 第一种 ##

基于绝对定位，要求有固定的宽高

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{
      ...
    }

## ![70 1][] ##

[70]: /images/20220524/f22f8864b28a4e5da88f9a201ee4b7ff.png
[demo_-codepen]: https://codepen.io/collection/AvxjPN/
[70 1]: /images/20220524/e8bbc48e433f492d9b40ee0b0884eda7.png