图像中的中心元素

Question

我已经尝试了here、here、here 和许多其他来源中的解决方案，但我似乎无法得到我想要的。

我正在使用 Kickstart 模板，我希望在其上居中（水平和垂直）图像和文本/元素。这就是我所拥有的：

<div class="grid">
<div class="col_12" style="margin-top:50px;" >
        <div class="mainImage"> 
            <h2>h2 Text</h2>
            <h3>h3 Text</h3>         
        </div>
</div>

还有我的 CSS：

.mainImage {
       height:400px;
       width:100%;
       background-image: url(img/Customers.png);
       text-decoration:line-through;
       display: flex;
       justify-content: center; /* align horizontal */
       align-items: center; /* align vertical */
 }

我试过了

显示：表格单元格； 垂直对齐：中间；

但这些不起作用。

大多数解决方案都涉及指定宽度。但我不想指定宽度，因为我希望页面具有响应性。如果我使用 display:table 它会使我的背景图像更小。

我想要的是： 1.拥有自己大小的图像 2. 以元素为中心

有什么建议可以试试？

谢谢。

Answer 1

我不久前遇到了这个问题。 这是我想出的：

HTML

<section id="abc">   
    <div class="table-cell">
        <div class="table-center">
            Centered
        </div>   
    </div> 
</section>

CSS

#abc {
    background: url(http://i.imgur.com/nvH8nI3.jpg) 50% 0 repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 500px;
    display: table;     
    -moz-box-shadow: inset 0 0 20px #333;
    -webkit-box-shadow: inset 0 0 20px #333;
    box-shadow: inset 0 0 20px #333;
}

.table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.table-center {
    display: inline-block;
    width: 460px;
    background: rgba(45, 45, 45, 0.80);
    border-radius: 5px;
    padding: 30px 30px;
    -webkit-box-shadow: 0 0 7px 2px #0F1519;
    box-shadow: 0 0 7px 2px #0F1519;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

http://jsfiddle.net/3Js35/2/