CSS是前端开发中必须掌握的技能之一,其可以对网页布局、颜色、字体等方面进行修改和美化。其中,设置页面居中是常见需求之一,本文将介绍如何使用CSS来实现页面在屏幕中央的水平/垂直居中。
设置页面水平居中的方法如下:
.main {width: 500px; margin: 0 auto; }.container {display: flex; justify-content: center; }
设置页面垂直居中的方法如下:
.container {height: 100vh; display: flex; justify-content: center; align-items: center; }.content {transform: translateY(-50%); }.container {height: 100vh; display: flex; justify-content: center; align-items: center; }.content {align-self: center; }
通过以上CSS代码的实现,我们可以很方便地让网页水平/垂直居中,从而让网页布局更加美观和整洁。