CSS的20种对齐代码！左对齐、右对齐、中间对齐、底部对齐、两端对齐等，代码简单(最全)

CSS提供了多种方式来对齐内容，以下是一些常用的对齐属性和示例代码：

1. 水平对齐：

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

2. 垂直对齐：

   • vertical-align: baseline; 基线对齐
   • vertical-align: top; 顶部对齐
   • vertical-align: middle; 垂直居中对齐
   • vertical-align: bottom; 底部对齐

3. Flexbox对齐：

   • justify-content: flex-start; 左对齐
   • justify-content: flex-end; 右对齐
   • justify-content: center; 居中对齐
   • justify-content: space-between; 两端对齐
   • justify-content: space-around; 平均分布

4. Grid对齐：

   • justify-items: start; 网格元素的起始边缘对齐
   • justify-items: end; 网格元素的结束边缘对齐
   • justify-items: center; 网格元素居中对齐
   • justify-content: start; 网格容器的起始边缘对齐
   • justify-content: end; 网格容器的结束边缘对齐
   • justify-content: center; 网格容器居中对齐
   • align-items: start; 网格元素的起始边缘垂直对齐
   • align-items: end; 网格元素的结束边缘垂直对齐
   • align-items: center; 网格元素垂直居中对齐
   • align-content: start; 网格行的起始边缘垂直对齐
   • align-content: end; 网格行的结束边缘垂直对齐
   • align-content: center; 网格行垂直居中对齐

示例代码：

/* 水平左对齐 */
.text-left {
  text-align: left;
}
 
/* 水平右对齐 */
.text-right {
  text-align: right;
}
 
/* 水平居中对齐 */
.text-center {
  text-align: center;
}
 
/* 水平两端对齐 */
.text-justify {
  text-align: justify;
}
 
/* Flexbox中水平居中对齐 */
.flex-center {
  display: flex;
  justify-content: center;
}
 
/* Grid中水平和垂直居中对齐 */
.grid-center {
  display: grid;
  place-items: center;
}
 
/* 单元格内容水平两端对齐 */
.grid-stretch {
  display: grid;
  justify-content: space-between;
}
 
/* 单元格内容垂直居中 */
.grid-align-center {
  display: grid;
  align-items: center;
}

在HTML中使用这些类：

<div class="text-left">左对齐文本</div>
<div class="text-right">右对齐文本</div>
<div class="text-center">居中对齐文本</div>
<div class="text-justify">两端对齐文本</div>
<div class="flex-center">Flex居中对齐</div>
<div class="grid-center">Grid居中对齐</div>
<div class="grid-stretch">Grid两端对齐</div>
<div class="grid-align-center">单元格垂直居中</div>

以上代码提供了不同的对齐方式，可以根据实际需求选择使用。