div 文字上下左右居中

在网页布局中，如果想要让`<div>`元素里的文字同时在水平和垂直方向上都居中，你可以使用CSS样式来实现。以下是一些常见的方法：

1. **Flexbox** (推荐)

   .container {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
     height: 100%; /* 如果有高度限制 */
   }
   
   .container > div {
     margin: auto; /* 自动分配剩余空间实现居中 */
   }

2. **Grid Layout**

   .container {
     display: grid;
     place-items: center; /* 同时水平和垂直居中 */
   }

3. **Positioning and margins**
对于传统的定位方法，可以设置`position: absolute`，然后调整`top`, `right`, `bottom`, 和 `left` 属性为`auto`:

   .container {
     position: relative; /* 确保父元素是定位容器 */
   }
   .container > div {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); /* 使用transform移动到中心 */
   }

确保`<div>`标签的直接父级有一个合适的定位（例如`relative`或`absolute`），这样内部元素才能在其基础上居中。