DIV实现input垂直居中

可以通过使用flex布局实现input垂直居中。具体实现方法如下：

HTML代码：

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

CSS代码：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

input {
  height: 30px;
  padding: 5px;
}

通过将包含input的父元素设置为flex布局，并使用align-items和justify-content属性将input垂直和水平居中。同时，设置input的高度和内边距可以使其看起来更美观。

相关问题

html input垂直居中

要让 `input` 元素在其父元素中垂直居中，可以使用 CSS 的 `flex` 布局。具体做法是：

1. 给父元素设置 `display: flex;` 和 `align-items: center;`，这样子元素就会在交叉轴（垂直方向）上居中对齐。

2. 给 `input` 元素设置 `margin: auto;`，这样就可以让其在主轴（水平方向）上居中对齐。

示例代码如下：

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

.container {
  display: flex;
  align-items: center;
  height: 100px; /* 设置父元素高度，以便演示垂直居中效果 */
}

input {
  margin: auto;
}

input文本垂直居中

要实现文本垂直居中，可以使用CSS的flex布局。具体实现方法如下：

HTML代码：

<div class="container">
  <div class="content">
    <p>这是要垂直居中的文本</p>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.content {
  text-align: center;
}

其中，`.container`是外层容器，使用`display: flex`将其设置为flex布局。`justify-content: center`和`align-items: center`分别将子元素水平和垂直居中。`.content`是内层容器，使用`text-align: center`将文本水平居中。