input在div中水平居中

可以使用CSS来实现在div中水平居中的效果。可以将div设置为display: flex，并将其子元素的justify-content属性设置为center。

HTML代码：

<div class="container">
  <input type="text" placeholder="请输入内容">
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
}

input {
  width: 200px;
  height: 30px;
}

这样就可以实现在div中水平居中的效果了。

相关问题

input在div中居中

可以通过以下CSS代码实现：

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

这会使`div`元素内部的内容水平和垂直居中。如果你只想让`input`元素居中，可以将CSS选择器更改为`div input`。

让<div>里的<input>保持水平居中，垂直居中

要在HTML的`<div>`元素中将内部的`<input>`元素水平和垂直居中，可以采用CSS Flexbox或者Grid布局。以下是两种常见的方法：

**1. 使用Flexbox:**

<style>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  height: 100%; /* 如果容器有高度限制，需要设置 */
}
.input-element {
  width: 200px; /* 设置输入框宽度，可根据需要调整 */
}
</style>

<div class="container">
  <input type="text" class="input-element" placeholder="请输入内容">
</div>

**2. 使用Grid布局:**

<style>
.container {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
  height: 100vh; /* viewport高度，同样需要设置合适的高度 */
}
.input-element {
  width: 200px; /* 输入框宽度 */
}
</style>

<div class="container">
  <input type="text" class="input-element" placeholder="请输入内容">
</div>