css实现页面垂直居中

许多网页设计中需要将某些元素垂直居中，常用的方法是通过CSS实现。本文将介绍两种常用的实现方式。

方法一：.父元素 {position: relative;}.子元素 {position: absolute;top: 50%;transform: translateY(-50%);}

解释：通过将父元素的position属性设置为relative，子元素的position属性设置为absolute，然后用top:50%将子元素移到父元素中间位置。但是此时子元素是以自己的左上角为参考基准，所以需要利用transform属性移动子元素的中心点到垂直中心。

方法二：.父元素 {display: flex;align-items: center;}

解释：通过将父元素的display属性设置为flex，子元素默认就会沿垂直方向居中。同时使用align-items属性保证子元素在父元素中间位置。

这两种方式都是比较简单的实现方法，但要注意兼容性问题。

上一篇：css实现缓慢上移

下一篇：css实现菜单下拉效果