这样的代码如何实现垂直居中和水平居中

要实现垂直居中和水平居中，可以使用Flex布局的一些属性和技巧。以下是一个示例代码，演示如何将图标和输入框在容器中实现垂直居中和水平居中：

HTML:

<div class="container">
  <div class="icon">
    <i class="fa fa-search"></i>
  </div>
  <input type="text" class="input-field">
</div>

CSS:

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: #ccc;
  height: 200px; /* 可根据实际需要调整高度 */
}

.icon {
  background-color: #ccc;
}

.input-field {
  flex-grow: 1;
  background-color: #ccc;
  border: none;
  padding: 5px;
}

在这个例子中，我们通过在容器（.container）上设置`justify-content: center;`和`align-items: center;`来实现水平居中和垂直居中。

`justify-content: center;`会将子元素在主轴上（水平方向）居中对齐。

`align-items: center;`会将子元素在交叉轴上（垂直方向）居中对齐。

我们还设置了容器的高度（height）为200px，可以根据实际需要进行调整。

这样就能实现图标和输入框在容器中的垂直居中和水平居中。