如何在 div 元素内居中放置 fontawesome 图标

Question

我有一个宽度为 180px，高度为 180px 的 div。
如何在容器内水平垂直居中一个 FontAwesome 图标？
注意：我可能会在图标下面添加文本。

<div style="width:180px; height:180px; float:left;">
  <i class="fa fa-search fa-4x"></i>
</div>

应该长成这个样子：

- Aritra Hazra

---

文本对齐方式：居中；行高：180像素； - Dwza

@Hanze，请查看我回答中的更新1。 - Hamix

更新了我的答案，花了我一点时间，但这应该可以完美地将所有内容居中到100% :) - Dwza

Answer 1

试试这个：

.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

.container{
width:100px;
height:100px;
}

在移动设备上。

- DifferentPseudonym

---

有帮助，但我必须在.container上添加position:relative，在.centered上添加position:absolute。 - Fred K

Answer 2

你可以这样做：

#search{
    background: gray;
    width:180px; 
    height:180px; 
    float:left; 
    line-height: 180px;     
    text-align: center;
    vertical-align: bottom;
}

#search > p {
    margin-top: -155px;
}

示例工作 http://jsfiddle.net/kasperFranz/h91p8w4e/3/ （在示例中使用图标而不是fa，但不应影响结果。）

- Kasper Sanguesa-Franz

---

它是如何影响图标的大小的？这里没有任何东西改变图标的大小。 - Kasper Sanguesa-Franz

抱歉，卡斯柏，这并不是100％的：）如果您删除文本，则图标不会完全居中。 实际上，它必须稍微向上或向下移动，具体取决于是否显示文本。 - Dwza

Answer 3

我可能来晚了，但这是一个常见的问题，所以这里有一个简单可行的想法，它有趣的一面在于它可以适应容器大小：

span{
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  text-align: center;
  width: 15px;
  height: 15px;
  display: block;
}

- Hamz Sider

Answer 4

假设根据我的评论，这是一个 JSFIDDLE。

未设置相对或绝对定位。

HTML。

<div class="myDiv">
    <div class="content_wrapper">
        <!--i class="fa fa-search fa-4x">test</i-->
        <i class="icon-search icon-4x"></i><br />
        <span class="myText">Search</span>
    </div>
</div>

css

.myDiv{
    width:         180px; 
    height:        180px; 
    float:         left;
    background:    #ccc;
    text-align:    center;
    display:       table;
}

.content_wrapper{
    display: table-cell;
    vertical-align: middle;
}

.myText{
    font-weight: bold;
    font-size:   20px;
}

- Dwza

Answer 5

CSS（层叠样式表）。

/* This parent can be any width and height */
.block {
  text-align: center;
    background:#ccc;
    margin-bottom:10px;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

HTML，即超文本标记语言。

<div class="block" style="height: 300px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>p1</p>
    </div>

</div>

<div class="block" style="height: 200px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>p2</p>
    </div>

</div>

<div class="block" style="height: 600px;">

    <div class="centered">
        <h1>Some text</h1>
        <p>p3</p>
    </div>

</div>

演示

更新 1： 演示

- Hamix

---

很确定这不是他要问的 ;) - Kasper Sanguesa-Franz

@Kasper Franz ;) 不确定他想做什么。我的回答是正确的。谢谢你的好奇心。**:))** - Hamix

我同意@KasperFranz的观点。 - Dwza

他想要的是：CSS 中的绝对水平和垂直居中 或者 将 Div 水平和垂直居中。我给了他一个简单的答案。 - Hamix

Answer 6

简单的方法是将 display: grid; place-items: center; 添加到你的 div 标签里，然后你就可以开始了。

像这样：

<div style="width:180px; height:180px; display: grid; place-items: center;">
  <i class="las la-user-circle"></i>
</div>

- Dreamer64

Answer 7

我知道可能有点晚了，你可能已经解决了这个问题。

我通过将图标和文本包装在一个 div 中，然后对其添加填充来实现你想要的效果。

请查看附带的代码片段。

http://codepen.io/ForTheJim/pen/YPxveR

<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>@ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

- ForTheJim