CSS中如何将div里的内容居中

当我们使用CSS创建网页布局时，经常需要将div里的内容居中。以下是一些常见的方法：
1. 使用text-align属性，将div内的文字居中对齐。

CSS
div {
  text-align: center;
} 

2. 使用margin属性，将div水平居中。

CSS
div {
  margin: 0 auto;
} 

3. 使用display属性和margin属性，将div居中。这种方法适用于加入固定宽度的div。

CSS
div {
  display: block;
  margin: 0 auto;
  width: 50%; /*或者其他值*/
} 

以上是一些常见的方法，但不仅限于此。你可以通过其他属性和方法实现内容的居中。
下面是代码示例：

HTML
<div>
  <p>这里是一段居中的文本</p>
  <img src="example.jpg">
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div> 

CSS
div {
  text-align: center;
}
p {
  font-size: 20px; /*设置文本大小*/
}
img {
  width: 50%; /*设置图片大小*/
  margin-top: 20px; /*为了保持上下间距一致，给图片留一些空白*/
}
ul {
  list-style: none; /*去除项目符号*/
  padding: 0;
  margin: 0;
}
li {
  font-size: 18px; /*设置列表项大小*/
  margin: 10px 0; /*设置上下边距*/
}
pre {
  border: 1px solid #ccc; /*设置边框*/
  padding: 10px; /*设置内边距*/
  background-color: #f7f7f7; /*设置背景颜色*/
  overflow-x: auto; /*当文本内容过多时，启用滚动条*/
  font-family: consolas, monospace; /*设置字体*/
  font-size: 16px; /*设置字体大小*/
} 

希望以上内容对你有所帮助！