使对齐文本块在div中居中。

Question

我这里有个很简单的问题。标题是不言而喻的。我知道这是一个常见的问题，我知道网上的解决方案。不过，这在我的情况下是行不通的。

我想要一个正确的文本block...to位于正中的div。

这就是现在的样子：

​

​

我想让它看起来像这样

​

​

我试过：

margin: 0px, auto;

并且已经定义了div的宽度。

这是幻灯片2的css。

/*slide 2 */
#slide-2 .bcg {
position: relative;
background-color: #1C1C1C;
padding:200px;
}

slide-2 .hsContent {
        position: relative;
}

slide-2 .hscontainer {
        width: 100%;
        height: 80%;
        overflow: hidden;
        position:relative;
         margin: 0px, auto;

}


#slide-2 h2 {
                 bottom: 10px;
                 color: #696d6d;
                 font-size: 16px;
                 line-height: 150%;
                 position: absolute;
                 line-spacing: 1px;
                 text-align: justify;
                 width: 700px;
}

以及html文件的一部分。

<section id="slide-2" class="homeSlide">
        //background style
         <div class="bcg">
               //container style
                  <div class="hsContainer">

       <h2>
         Lorem ipsum dolor sit amet,
         consectetur adipiscing elit.
         Aenean dictum ligula et tellus tempus,
         id tincidunt sapien ultricies. 
      </h2>
        </div>
        </div>

    </section>

谢谢

Answer 1

为了像在这个答案的注释中指出的那样，将<h2>放在中心，我调整了css如下：

#slide-2 .bcg {
position: relative;
background-color: #1C1C1C;
padding:200px;
}

#slide-2 h2 {
color: #696d6d;
font-size: 16px;
position:absolute;
top: 50%;
left: 50%
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-spacing: 1px;
text-align: justify;
} 

-webkit-transform和-ms-transform是浏览器前缀。如果不添加它们，h2将不会在火狐或IE中居中。

在这个这里上有一个很好的博客文章。

这里是个骗子。

Answer 2

要使h2元素居中，只需使用以下命令

#slide-2 h2 {
  color: #696d6d;
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-spacing: 1px;
  text-align: justify;
}

http://jsfiddle.net/yvr6591t/1/