如何让div在页面中居中

为了让`<div>`元素在页面中水平垂直居中，有几种常见的方法：

1. **CSS Flexbox**:

   .container {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center;   /* 垂直居中 */
   }
   
   .centered-div {
     width: 200px; /* 或者设置宽度 */
   }

然后将`<div class="centered-div">...</div>`放入`.container`内。

2. **CSS Grid**:

   .container {
     display: grid;
     place-items: center; /* 同时水平和垂直居中 */
   }
   .centered-div {
     /* 设置宽度 */
   }

3. **Positioning and Padding/Border**:

   <style>
   .container {
     position: relative;
     padding-top: 50%; /* 如果div高度未知，可以动态计算 */
     height: 0;
     overflow: hidden;
   }
   .centered-div {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   </style>

   <div class="container">
     <div class="centered-div">内容</div>
   </div>

这里使用了相对定位，并通过transform调整元素到中心位置。

4. **表格布局 (Table Layout)**:
对于传统的表格布局，可以使用`display: table-cell`:

   .container {
     display: table;
   }
   .centered-div {
     display: table-cell;
     vertical-align: middle;
   }

选择哪种方法取决于具体的项目需求、兼容性和你对HTML结构的控制程度。如果你需要兼容旧版浏览器，Flexbox可能是最好的选择。