首页让body中的块水平居中

让body中的块水平居中

时间: 2024-02-15 15:06:13 浏览: 54

要让body中的块级元素在水平方向上居中，可以使用以下CSS： ``` body { display: flex; justify-content: center; } ``` 这样，body中的所有块级元素都会在水平方向上居中。如果你只想让某个块级元素在水平方向上居中，可以将它放在一个包裹元素中，并设置这个包裹元素的CSS，如下所示： ```html <body> <div class="wrapper"> <div class="element">这个元素会在水平方向上居中</div> </div> </body> ``` ```css .wrapper { display: flex; justify-content: center; } ``` 这样，`.element` 就会在 `.wrapper` 中水平居中。如果你想要在页面上垂直居中，可以设置`.wrapper`的高度，并将其内部元素的垂直方向对齐方式设置为居中，如下所示： ```html <body> <div class="wrapper"> <div class="element">这个元素会在水平和垂直方向上居中</div> </div> </body> ``` ```css .wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; } ``` 这里的 `100vh` 表示视口的高度，即页面的高度。这样，`.element` 就会在 `.wrapper` 中水平和垂直居中。

阅读全文