网络技术问题 | CSS 测验 |第一组 |问题 4

问题描述

在 CSS 中，如何让一个元素居中显示？

解决方案

有多种方法可以让一个元素居中显示，具体选择哪种方法取决于布局方式和元素类型。

水平居中

要让一个元素水平居中显示，可以使用 text-align: center 属性。

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

上面的代码中，首先将父级元素的文本对齐方式设置为居中，然后将子元素的显示方式设置为内联块级元素，这样就可以让该元素在父级元素中水平居中显示。

垂直居中

要让一个元素垂直居中显示，可以使用 display: flex; justify-content: center; align-items: center; 属性组合。

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

.child {
  width: 100px;
  height: 100px;
}

上面的代码中，首先将父级元素的显示方式设置为 flex，然后将主轴方向和交叉轴方向都设置为居中对齐，这样子元素就可以在父级元素中垂直居中显示。

总结

以上是两种常用的让元素居中显示的方法，在实际开发中根据具体情况选择合适的方法。