水平垂直居中的实现

类别：htmlcss / 日期：2023-02-07 / 浏览：481 / 评论：0

利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页 面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。 该方法需要考虑浏览器兼容问题。

利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto， 由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上 的居中。该方法适用于盒子有宽高的情况：

利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页 面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中 心。该方法适用于盒子宽高已知的情况

使 用 flex 布 局 ， 通 过 align-items:center 和 justify-content:center设置容器的垂直和水平方向上为居中对齐， 然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的 问题，该方法在移动端用的较多：-水平垂直居中