如何使用CCS和HTML将三张卡片居中对齐？

要使用CSS和HTML将三张卡片居中对齐，可以按照以下步骤进行操作：

1. 创建HTML结构：在HTML文件中，使用<div>元素创建一个容器，然后在容器内部创建三个<div>元素，分别代表三张卡片。

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

1. 添加CSS样式：在CSS文件中，为容器和卡片添加样式。

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

.card {
  width: 200px;
  height: 300px;
  background-color: #f1f1f1;
  margin: 0 10px;
}

解释：

• display: flex;将容器设置为弹性布局，使得内部元素可以水平排列。
• justify-content: center;将内部元素水平居中对齐。
• align-items: center;将内部元素垂直居中对齐。
• height: 100vh;设置容器的高度为视口的高度，以确保卡片在垂直方向上居中对齐。
• width: 200px;和height: 300px;设置卡片的宽度和高度，可以根据实际需求进行调整。
• background-color: #f1f1f1;设置卡片的背景颜色，这里使用了灰色作为示例。
• margin: 0 10px;设置卡片之间的水平间距，可以根据实际需求进行调整。

1. 在HTML文件中引入CSS文件。

<link rel="stylesheet" href="styles.css">

完成以上步骤后，三张卡片将在页面中水平居中对齐。你可以根据需要修改卡片的样式和数量。