css内容高度居中 |css中添加子元素

在传统的HTML中，大家可以将内容包装在一个中心的div中，并将div的高度设置为100%。但是，这种方法将导致不同大小的内容在左侧偏移。这就是为什么大家需要使用新的设置方法——弹性box。

.center {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
 }

这个代码块使用display:flex属性将元素设置为具有弹性的容器。这样容器可以自动调整其尺寸以适应浏览器视窗大小。还要设置align-items:center和justify-content:center属性来使容器的内容在垂直和水平方向上都居中。

在此基础上，大家还可以使用其他CSS属性来个性化设置。例如，大家可以通过在容器中添加一个padding属性来控制内容与容器之间的空白区域：

.center {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
 }

这样就可以在内容周围留出一定的空白，使其更加美观。

总之，在实践中，大家可以通过使用CSS弹性box来轻松地实现高度居中的东西。这样不仅可以使网站更加美观，还可以提高用户体验。继续使用你的CSS技巧和智慧来探索更多高效的网页设计。