css - 如何水平和垂直居中我的图标？

Question

我正在尝试类似 fontawesome 的东西，并希望将图标居中:

 <div class="col-md-2">
        <i class="fa fa-bandcamp" aria-hidden="true"></i>
 </div>

在不使用特殊类的情况下，如何使用 css 进行管理？我试过 text-align 、 center 等？

Answer 1

如果你can use flexbox , 可以通过align-items 和justify-content 轻松解决。添加 border 只是为了显示 div 的侧面。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
 <div class="col-md-2" style="border: 1px black dotted; display: flex; align-items: center; justify-content: center; height: 50px;">
        <i class="fa fa-bandcamp" aria-hidden="true"></i>
 </div>
</div>
</div>