如何在CSS中居中input标签？尝试text-align:center无效

你遇到的问题是text-align: center作用的对象搞错了——这个属性是用来让元素内部的文本/行内内容居中，而不是让input元素本身在父容器里居中。下面给你几种可行的实现方式：

方式一：利用父容器的text-align属性 #

input属于行内块元素，给它的父容器添加text-align: center，就能让input在父容器水平居中：

<div class="input-wrap">
  <input type="text" placeholder="测试输入">
</div>

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

input {
  background-color: black;
  border-color: blueviolet;
  outline-color: peru;
  color: crimson;
  height: 50px;
}

方式二：Flex布局（推荐） #

用Flex布局可以更灵活地实现居中，还能轻松实现垂直居中：

.input-wrap {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 可选：垂直居中 */
  min-height: 100vh; /* 可选：让容器占满视口高度，配合垂直居中使用 */
}

input {
  background-color: black;
  border-color: blueviolet;
  outline-color: peru;
  color: crimson;
  height: 50px;
}

方式三：将input设为块级元素后用margin:auto #

把input转为块级元素，设置宽度后，用margin: 0 auto实现水平居中：

input {
  background-color: black;
  border-color: blueviolet;
  outline-color: peru;
  color: crimson;
  height: 50px;
  display: block;
  width: 300px; /* 必须设置宽度，否则块级元素默认占满父容器，margin:auto无效 */
  margin: 0 auto;
}

如果需要让input内部的输入文本居中，才给input添加text-align: center，这时候控制的是输入内容的对齐方式，和元素本身的位置无关。

内容的提问来源于stack exchange，提问作者tikhi