如何使文本框在CSS中居中

在CSS中，您可以使用多種方法使文本框居中，以下是一些常見(jiàn)的方法：

1、使用margin屬性：

通過(guò)為文本框設(shè)置左右相等的margin，可以使其水平居中。

.text-box {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 您可以根據(jù)需要調(diào)整寬度 */
}

2、使用transform屬性：

通過(guò)transform屬性，您可以輕松地移動(dòng)文本框到頁(yè)面的中心位置。

.text-box {
  position: absolute; /* ***定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 將文本框移動(dòng)到中心位置 */
}

3、使用flexbox布局：

Flexbox是一種靈活的布局方式，可以輕松地使元素在容器中居中。

.container {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 使元素在容器中水平居中 */
  align-items: center; /* 使元素在容器中垂直居中 */
}