在响应父节点上始终水平和垂直居中div

Question

我有一个标题，我希望在父图像div中始终水平和垂直居中当父div没有固定的宽度和高度但是具有响应的宽度和高度< / strong>使用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 Trick的Chris Coyier这个很好的方法，他使用百分比和CSS3的变换：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