CSS垂直居中方案

<div class="main">

    <h1>Please center me vertically</h1>

</div>

---

1.基于绝对定位

   .main{

        position:absolute;

        top: 50%:

        left: 50%;

        width: 10rem;

        height: 6rem;

        margin-top: -3rem;  (6/2=高度/2)

        margin-left: -5rem;  (10/2 = 宽度/2）

     }

弊端：要求元素具有固定的宽度和高度：

---

2.clac()函数

    .main{

        position: absolute;

        top: calc(50% - 3rem);

        left: clac(50% - 5rem);

        width: 10rem;

        height: 6rem;

     }

弊端：要求元素具有固定的宽度和高度：

---

3.使用Transforms 变形函数

    .main{

        position: absolute;

        top: 50%:

        left: 50%;

        transform:translate(-50%, -50%);

     }

弊端：使用绝对定位对布局影响太大，已经脱离了文档流。如果居中文件高度超过了视口就会被视口切掉

---

4.基于viewport

    .main{

        width: 10rem;

        padding：1rem 2rem;

        margin: 50vh auto 0; 

        transform: translateY(-50%);

     }

弊端：只适用于在视口中居中的场景

---

5.基于Flexbox

    .main{

        display:flex;

        justify-content:center;

        align-item:center;

     }

最佳解决方案、主流浏览器已经支持