超实用！web盒子居中对齐代码大揭秘

要将一个盒子在web中居中对齐，可以使用以下代码： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 100%视窗高度 */ } .box { width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> ``` 上述示例使用了flex布局。通过将外部容器的display属性设置为flex，并使用justify-content:center和align-items:center将内部盒子水平和垂直居中对齐。.container的height属性指定了容器的高度为100%视窗高度，可以根据需要调整。 ######[AI写代码神器 | 405点数解答 | 2024-06-20 13:45:12]

服务商

更多选项

快捷项

自定义

超实用！web盒子居中对齐代码大揭秘