在响应式父级上始终将 div 水平和垂直居中

Question

我有一个标题，我想在父图像 div 中始终保持水平和垂直居中 当父 div 没有固定的宽度和高度，而是具有响应式宽度和高度 使用 Twitter Bootstrap 3.1 的响应式列。

HTML：

<div id ="firstholder" class= " col-sm-4 col-md-4 col-lg-4">
    <a href="home.html" title="Home" class="imglink"> 
        <div class="item1"><h1 class="slickfont1" >Home</h1>
        </div><img src="/images/slide2.JPG" alt="City Lights Image"  class="img-responsive" >
    </a>
</div>


#firstholder {
    display:inline-block;
    float:left;
    margin:0;
    padding:0;
    height:auto;
    position:relative;
}


a.imglink  {
    background:  #fff;
    display: inline-block;
    width:100%;
    height:auto;
    position:relative;
}

.item1 {
    height:150px;
    width: 150px;
    margin: 0 auto;
    position:absolute;
    z-index:100;
    vertical-align:middle;
}

.slickfont1 {
    z-index:10;
    color: #fff;
    position:absolute;
    font-family: 'Bowlby One SC', cursive;
    font-size: 37px;
    font-weight:lighter;  
    position: absolute;
    text-shadow:0 0 0 transparent, -2px 2px 2px  #1542bd;
}

谢谢:)

Answer 1

您可以使用 CSS Tricks 的 Chris Coyier 提供的这个不错的方法，他使用百分比和 CSS3 的 transform:translate 来实现您所需要的。 Centering Percentage Width/Height Elements
现在，当您使用 Bootstrap 时，您需要自己调整它。

来自 Chris Coyier 的代码：

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: 40%;
  height: 50%;
}

最好去 CSSTricks（使用上面的链接）并研究整个帖子（您还会发现使用它的原因以及为什么它比其他居中方法更好）。 我希望这对你有所帮助。

Answer 2

我不确定我是否理解正确，但让我们从这里开始：

CSS：

div.center {
  display: table-cell;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  text-align: center;
    border: 1px solid #000;
    background-color: #ccc;
}

div.inner {
    margin: 0 auto;
}

HTML：

<div class="center">
    <div class="inner">
        <div class="title">
            Title Here
        </div>
    </div>
</div>

这是你想要做的吗？假设灰色背景是图像？ SAMPLE HERE