首页div 在body 居中

div 在body 居中

时间: 2025-01-01 19:05:42 浏览: 7

要在HTML中的`<div>`元素居中对齐于整个`<body>`，可以使用CSS中的`margin: auto`和`display: flex`或者`position: absolute`配合百分比宽度。这里给出两种常见方法： 1. 使用Flexbox布局： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { display: flex; justify-content: center; /* 将内容水平居中 */ align-items: center; /* 将内容垂直居中 */ min-height: 100vh; /* 设置视口高度 */ margin: 0; /* 清除默认边距 */ } .center-div { width: 50%; /* 或者自适应宽度，如：width: calc(50% - 20px); */ background-color: lightblue; } </style> </head> <body> <div class="center-div">这是居中的<div></div></div> </body> </html> ``` 2. 使用绝对定位和百分比宽度： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { position: relative; /* 需要设置body为相对定位 */ margin: 0; /* 清除默认边距 */ padding: 0; } .center-div { position: absolute; /* 绝对定位 */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* 将元素移到中心 */ width: 50%; /* 自适应宽度 */ background-color: lightblue; } </style> </head> <body> <div class="center-div">这是居中的<div></div></div> </body> </html> ``` 在这两个示例中，`.center-div`会居中显示，并且可以根据需要调整其宽度。

阅读全文