实现垂直居中是CSS中的一个十分重要且常见的问题。有多种方式可以实现垂直居中,以下介绍几种比较常见的实现方法。
方法一:使用flex布局 .container { display: flex; align-items: center; justify-content: center; }
该方法通过将容器设置为flex布局,再使用align-items和justify-content属性设置垂直和水平方向上的居中,来实现垂直居中。
方法二:使用absolute相对父元素的坐标值 .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
该方法通过将子元素的定位方式设置为absolute,并将top值设置为50%,再使用transform:translateY(-50%);向上偏移子元素的高度的一半来实现垂直居中。
方法三:使用grid布局 .container { display: grid; place-items: center; }
该方法通过将容器设置为grid布局,再使用place-items属性设置为center来实现垂直和水平方向上的居中。