CSS 的垂直居中

最新推荐文章于 2025-06-23 09:16:59 发布

转载最新推荐文章于 2025-06-23 09:16:59 发布 · 44 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhizhic/p/10251597.html

本文探讨了使用CSS的vw, vh, vmin和vmax单位进行响应式设计的方法，特别是如何利用vh单位实现元素在视口中的垂直居中。通过具体示例展示了如何设置main元素的尺寸和外边距，使其在页面上居中显示，同时介绍了如何结合Flexbox的align-items和justify-content属性使内部文本也达到居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


main { 
  position: absolute;  
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
}

vw ：1% of viewport’s width
vh ：1% of viewport’s height
vmin ：1% of viewport’s smaller dimension
vmax ：1% of viewport’s larger dimension

在我们的这个例子中，适用于外边距的是 vh 单位：
main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0; 
    transform: translateY(-50%);
}
这个技巧的实用性是相当有限的，因为它只适用于在视口中居中的场景。