在（Bootstrap）响应图像上居中项目

Question

我正在尝试将按钮放在具有响应属性的图像上。我正在使用boostrap 3.目前我已经使用CSS margin-left和margin-right来居中，但当然这种效率并不高，尤其是在较小的视口上观看时。

这是我的CSS

    .gallery-list > li  .gallery-thumbnail i{
      top: 80px;
      color: red;
      opacity: 0;
      position: absolute;
      font-size: 50px; 
      display:block;
      margin-left: 120px;
      background-color: transparent;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;    
    }

    .gallery-list > li:hover  .gallery-thumbnail i{
      opacity: 1;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;  
    }

大屏幕显示：

小屏幕显示：

所以问题是，无论设备视口如何，我如何将按钮居中？

Answer 1

这是b / c您的保证金不负责任。它使用绝对值;更喜欢：

 margin-left: auto;
 margin-right: auto;

Answer 2

您可以使用bootstrap的帮助程序类center-block

http://getbootstrap.com/css/#helper-classes-center

或者只是添加

margin-left:auto; 
margin-right:auto;

Answer 3

添加

margin-left: auto;
margin-right: auto;

由于元素绝对定位，

无法解决问题。请尝试以下代码：

.gallery-list > li  .gallery-thumbnail {
    position: relative;
    display: block;
}
.gallery-list > li  .gallery-thumbnail i {
    position: absolute;
    top: 50%;
    margin-top: -25px; /* your icon height devided by 2 */
    left: 50%;
    margin-left: -21px; /* your icon width devided by 2 */
    font-size: 50px;
    color: red;
    opacity: 0;
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;  
            transition: all 0.3s;     
}
.gallery-list > li:hover  .gallery-thumbnail i{
    opacity: 1;
}