掌握CSS秘籍：图片与字体轻松居中布局全攻略

引言

图片居中布局

1. 水平居中

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

2. 垂直居中

对于垂直居中，可以使用以下方法：

方法一：使用Flexbox

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 设置容器高度 */
}

方法二：使用CSS表格布局

.center-container {
  display: table;
  height: 200px; /* 设置容器高度 */
  width: 100%;
}

.center-image {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

字体居中布局

1. 水平居中

对于水平居中文本，可以使用以下CSS样式：

.center-text {
  text-align: center;
}

在这个例子中，.center-text 类将应用于需要居中的文本，text-align: center; 将使文本在父容器中水平居中。

2. 垂直居中

要实现垂直居中文本，可以使用以下方法：

方法一：使用Flexbox

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 设置容器高度 */
}

在这个例子中，.center-container 类将应用于包含文本的容器。display: flex; 激活Flexbox布局，justify-content: center; 和 align-items: center; 分别使内容在水平和垂直方向上居中。

方法二：使用CSS表格布局

.center-container {
  display: table;
  height: 200px; /* 设置容器高度 */
  width: 100%;
}

.center-text {
  display: table-cell;
  vertical-align: middle;
}

在这个例子中，.center-container 类将应用于包含文本的容器。display: table; 将容器视为表格，.center-text 类将文本视为单元格，并通过 vertical-align: middle; 使文本在容器中垂直居中。

总结