首页使用css将两个div并行居中

使用css将两个div并行居中

时间: 2024-10-03 09:02:46 浏览: 40

你可以使用CSS的 Flexbox 或 Grid 布局来将两个 `div` 并排居中。以下是两种方法： **Flexbox 方法**: ```html <!DOCTYPE html> <html lang="en"> <head> <style> .container { display: flex; justify-content: center; /* 居中水平方向 */ align-items: center; /* 居中垂直方向 */ height: 100vh; /* 视口高度，可根据需要调整 */ } .box { width: 200px; /* 你的div宽度 */ margin: 10px; /* 边距调整空间，可选 */ } </style> </head> <body> <div class="container"> <div class="box">Div 1</div> <div class="box">Div 2</div> </div> </body> </html> ``` **Grid 方法**: ```html <!DOCTYPE html> <html lang="en"> <head> <style> .container { display: grid; place-items: center; /* 同时居中水平和垂直方向 */ height: 100vh; } .box { width: 200px; /* 如果有边距需求，可以设置 */ } </style> </head> <body> <div class="container"> <div class="box">Div 1</div> <div class="box">Div 2</div> </div> </body> </html> ```

阅读全文