在div中将“ i”元素居中

Question

任何人都可以想到一种更好的方法来将此“ i”元素居中到此div中，而无需像我在此处所做的那样使用像素特定的边距。 当div悬停在div上时，“ i”元素会增加。

这是我的代码。

HTML：

<div class="nav-collapse">
  <i class="fa fa-bars fa-2x" id="bars"></i>
</div>

CSS：

.nav-collapse {
top: 30px;
right: 30px;
position: fixed;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: white;
z-index:200;
transition: width 0.2s, height 0.2s;

}

.nav-collapse i{
position: absolute;
color: #FFB361;
}

#bars {
margin-left: 11px;
margin-top: 9px;
}


.nav-collapse:hover {
    width: 60px;
    height: 60px;
}

Answer 1

见下面的输出

• 将text-align：center和line-height：50px添加到div

• 从我删除绝对位置

• 删除#bars样式

• 随着高度的变化，将line-height：60px添加到悬停状态

 .nav-collapse { top: 30px; right: 30px; position: fixed; border-radius: 50%; width: 50px; height: 50px; line-height:50px; background-color: white; z-index:200; transition: line-height 2s, width 0.2s, height 0.2s; text-align:center; background:red; } .nav-collapse i{ color: #FFB361; } .nav-collapse:hover { width: 60px; height: 60px; line-height:60px; } 

 <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars">aa</i> </div> 

Answer 2

使用transform: scale(1.4)而不是更改width和height 。

 .nav-collapse { top: 30px; right: 30px; position: fixed; border-radius: 50%; width: 50px; height: 50px; background-color: white; z-index: 200; transition: transform 0.2s; } .nav-collapse i { position: absolute; color: #FFB361; } #bars { margin-left: 11px; margin-top: 9px; } .nav-collapse:hover { -webkit-transform: scale(1.4); transform: scale(1.4); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; cursor: pointer; } 

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars"></i> </div>