如何将图标垂直和水平放置在中心

Question

我想让一个图标垂直和水平居中于div。

＆＃13;

＆＃13;

.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;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我从顶部给了 50％。但它不是垂直居中的。

Answer 1

您可以使用CSS变换将图标向上移动50％的高度，从而将图标置于其父元素中。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用真棒属性calc，calculate 50% - image height

看看这个例子，我只是将calc属性添加到css

＆＃13;

＆＃13;

.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: calc(50% - 35px);
  // border: thin red solid;
}
span i{
  font-size: 65px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用transform

将CSS translateY(-50%)用于父级的水平中心

＆＃13;

＆＃13;

.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%;
  // border: thin red solid;
  transform: translateY(-50%);
}

span i{
  font-size: 65px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以在父级上使用display: flex;和flex-direction: column;，并在图标的上方和下方添加flex-grow: 1; div。然后，不断增长的div将在它们之间均匀划分可用空间并垂直居中图标。

有了这个，居中的div有多大并不重要。

browser support

.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;

    /* New */
    display: flex;
    flex-direction: column;
  }

 .exhibitor_image_default_icon{
     height: 70px;
     width: 70px;
     margin: 0 auto;
     position:relative;
     /*border: thin red solid;*/
 }


 span i {
     font-size: 65px;
 }


 /* New */
 .flex_grow {
     flex-grow: 1;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="exhibitor_image_div">
    <div class="flex_grow"></div><!-- HERE -->
    <div class="exhibitor_image_default_icon">
        <span><i class="glyphicon glyphicon-user"></i> </span>
    </div>
    <div class="flex_grow"></div><!-- HERE -->
</div>

Answer 5

我发现这篇文章非常有用 - https://css-tricks.com/centering-css-complete-guide/

然而，与您的问题有关 - 您只需要添加1行代码：

.exhibitor_image_default_icon{
    height: 70px;
    width: 70px;
    margin: 0 auto;
    position:relative;
    top: 50%;
    transform: translateY(-50%); <-- new line of code 
    /* add the browser specific transform */
}

JS小提琴：https://jsfiddle.net/chris2001/orfp8bb4/1/

Answer 6

Minimalistic flexbox解决方案：只需添加到项margin: auto（当然，将display: flex添加到包含）。这将水平和垂直居中项目。而且你不必处理绝对定位的块。

最终代码，删除了多余的样式：

.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;
  display: flex;
}

.exhibitor_image_default_icon {
  height: 70px;
  width: 70px;
  margin: auto;
}

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>