css中文字居中的命令

在CSS中，文字居中是非常常见且重要的样式属性之一，很多时候我们需要把文字或者其他内容（比如按钮、图标等）居中对齐，这时候就可以使用text-align属性来实现。

text-align属性有以下几个取值：

text-align: left; // 左对齐
text-align: right; // 右对齐
text-align: center; // 居中对齐
text-align: justify; // 两端对齐 

其中，text-align: center; 就是我们今天要介绍的内容，它能让文字、图片、表格等元素在其父元素中水平居中。

在实际开发中，有时候我们需要让多个元素居中，比如菜单导航按钮，这时候我们需要将这些元素放在一个容器中，并设置该容器的text-align属性为center即可，示例如下：

.container {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #EEE;
  border-radius: 5px;
  border: none;
  font-size: 18px;
}

<div class="container">
  <button class="btn">按钮1</button>
  <button class="btn">按钮2</button>
  <button class="btn">按钮3</button>
</div> 

上述代码会让三个按钮在一个居中的容器中水平排列显示。

除了使用text-align属性，我们还可以使用flex布局来实现文字、图片、表格等元素的居中对齐。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 300px;
  height: 200px;
  background-color: #EEE;
  text-align: center;
  font-size: 24px;
}

<div class="container">
  <div class="content">这是一段文本内容</div>
</div> 

上述代码会让一段文本内容在居中的容器中水平和垂直居中显示。

总结：文字居中是CSS样式开发中经常需要用到的，通过text-align和flex布局，我们能够实现不同需求的居中对齐效果。