如何将包含font-awesome图标的div定位到另一个div的中心？

Question

我试图将包含字体真棒图标的div放在另一个div的中心，但我无法以正确的方式进行。

我有以下代码：

HTML：

<div id="menuRightSide" >
            <div class="rightSideMenuItem">
                <div class="fa fa-facebook fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>
            </div>
            <div class="rightSideMenuItem">
                <div class="fa fa-twitter fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>
            </div>
            <div class="rightSideMenuItem">
                <div class="fa fa-question fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>
            </div>
        </div>

CSS：

#menuRightSide {
position: absolute;
top: 36%;
right: 2%;
width: auto;

}

.rightSideMenuItem {
    background: url("../img/objects/side_menu_item.png") no-repeat;
    background-color: transparent;
    z-index: 1990;
    background-size: 100%;
    left: 2%;
    padding-bottom: 33%;
    /* padding-right: 20%; */
    /* margin-left: 20%; */
    position: relative;
}

.rightSideMenuItemIcon {
    color: #fff;

}

产生类似的东西：

但是我想得到的结果是，图标位于rightSideMenuItem div类的中心，所有边都有相同的填充，以获得这样的结果。

我尝试通过上面提到的方式做到但没有运气。我怎么能以正确的方式做到这一点？

Answer 1

字体真棒图标基本上是文本，所以这可能会有所帮助：

.rightSideMenuItem {
    background: url("../img/objects/side_menu_item.png") no-repeat;
    background-color: transparent;
    z-index: 1990;
    background-size: 100%;
    left: 2%;
    padding-bottom: 33%;
    /* padding-right: 20%; */
    /* margin-left: 20%; */
    position: relative;
    text-align: center;
}

<强> Demo

Answer 2

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
body{background-color:black}

#menuRightSideGame {
    position: absolute;
    top: 28%;
    right: 2%;
}
.rightSideMenuItem {
    width:70px;
    height:70px;
    background: #c3834c;
    z-index: 1990;
    background-size: 100%;
    position: relative;
    border-radius:50%;
    box-shadow:0 0 5px 5px white;
    margin:20px;
    text-align: center; /* vor horizontal align */
}
.rightSideMenuItemIcon {
    color: #fff;
    line-height:70px; /* for vertical align, needs to be same as parent height */
}

<div id="menuRightSide">
    <div class="rightSideMenuItem">
        <div class="fa fa-facebook fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>
    </div>
    <div class="rightSideMenuItem">
        <div class="fa fa-twitter fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>
    </div>
    <div class="rightSideMenuItem">
        <div class="fa fa-question fa-2x rightSideMenuItemIcon" ng-click="redirectToGamePage();" id="repeatIcon"></div>
    </div>
</div>