html - 如何将图标垂直和水平居中

Question

我想要一个图标在 div 上垂直和水平居中。

.exhibitor_image_div{
    width: 200px;
    height: 200px;
    border: thin black solid;
    -webkit-border-radius: 3px ;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin: 0 auto;
    text-align: center;
}

.exhibitor_image_default_icon{
    height: 70px;
    width: 70px;
    margin: 0 auto;
    position:relative;
    top: 50%;
}


 span i {
     font-size: 65px;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="exhibitor_image_div">
    <div class="exhibitor_image_default_icon">
        <span><i class="glyphicon glyphicon-user"></i></span>
    </div>
</div>

我已经从上面给出了50%。但它不是垂直居中的。

Answer 1

您可以使用 CSS 转换将图标向上移动 50% 的高度，从而使图标在其父元素中居中。

.exhibitor_image_div {
  width: 200px;
  height: 200px;
  border: thin black solid;
  -webkit-border-radius: 3px ;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0 auto;
  text-align: center;
}
.exhibitor_image_default_icon {
  height: 70px;
  width: 70px;
  margin: 0 auto;
  position:relative;
  top: 50%;
  transform: translateY(-50%);
  // border: thin red solid;
}
span i {
  font-size: 65px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="exhibitor_image_div">
  <div class="exhibitor_image_default_icon">
    <span><i class="glyphicon glyphicon-user"></i> </span>
  </div>
</div>