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

Question

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

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的转换：translate来实现您的需求。 居中百分比宽度/高度元素
现在你正在使用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>

这是你想要做的吗？ 假设灰色背景是图像？ 在这里采样