html - 图像中的中心元素

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-cell; vertical-align: middle;

但是这些不起作用。

大多数解决方案都涉及指定宽度。但我不想指定宽度，因为我希望页面能够响应。如果我使用 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/