Element UI el-icon-search 图标上下居中设置方法

<el-input v-model='input' placeholder='请输入内容'>
  <template slot='suffix'>
    <div class='template-wrapper'>
      <i class='el-icon-search'></i>
    </div>
  </template>
</el-input>
<style>
  .template-wrapper {
    position: relative;
  }
  .template-wrapper i {
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
<h2>Element UI el-icon-search 图标上下居中设置方法</h2>
<p>可以使用 CSS 的 flex 布局来实现 el-icon-search 图标在 el-input 组件的 suffix 插槽中上下居中显示，具体步骤如下：</p>
<ol>
<li>给 <code>&lt;i&gt;</code> 标签设置 <code>display: flex</code> 和 <code>align-items: center</code> 样式，使其垂直居中对齐。</li>
<li>设置 <code>&lt;i&gt;</code> 标签的父元素 <code>.template-wrapper</code> 为 <code>position: relative</code>，使 <code>&lt;i&gt;</code> 标签相对于父元素进行定位。</li>
<li>给 <code>&lt;i&gt;</code> 标签设置 <code>position: absolute</code>、<code>right: 10px</code> 和 <code>top: 50%</code>（或者 <code>transform: translateY(-50%)</code>）样式，使其在父元素的右侧，且垂直居中对齐。</li>
</ol>
<p><strong>具体代码如下：</strong></p>
<pre><code class="language-html">&lt;el-input v-model='input' placeholder='请输入内容'&gt;
  &lt;template slot='suffix'&gt;
    &lt;div class='template-wrapper'&gt;
      &lt;i class='el-icon-search'&gt;&lt;/i&gt;
    &lt;/div&gt;
  &lt;/template&gt;
&lt;/el-input&gt;

&lt;style&gt;
  .template-wrapper {
    position: relative;
  }
  .template-wrapper i {
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
&lt;/style&gt;
</code></pre>