iam*_*der 2 html css twitter-bootstrap-3
我想使用 i 标签将 fa 放在 div 的中心，但我对如何做到这一点有点无能为力。有什么帮助吗？
我是个新来的。
谢谢
示例 HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#lock-cirle {
border: solid 2px #9f070a;
border-radius: 100%;
width: 100px;
height: 100px;
margin: 0px auto;
margin-top: 5%;
margin-bottom: 5%;
}
#lock-icon{
font-size: 50px;
color: #9f070a;
margin: 27%;
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 text-center">
<div id="lock-cirle" style="background-color: yellow;">
<i class="fa fa-lock" id="lock-icon" style="background-color: green;"></i>
</div>
</div>
</body>
</html>
设置text-align:center;为父 div #lock-cirle，像这样
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#lock-cirle {
border: solid 2px #9f070a;
border-radius: 100%;
width: 100px;
height: 100px;
margin: 0px auto;
margin-top: 5%;
margin-bottom: 5%;
text-align:center;
}
#lock-icon{
font-size: 50px;
color: #9f070a;
margin: 27%;
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2 text-center">
<div id="lock-cirle" style="background-color: yellow;">
<i class="fa fa-lock" id="lock-icon" style="background-color: green;"></i>
</div>
</div>
</body>
</html>因为元素<I>默认是内联的，text-alignCSS属性描述了内联内容如何对齐
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align