[分享]CSS中如何将div里的内容居中

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

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

CSS
div {
  text-align: center;
} 

CSS
div {
  margin: 0 auto;
} 

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; /*设置字体大小*/
}