在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>