Question

不完全确定为什么要这样做，但我只是试图让我的文本水平和垂直居中于其父级div中。我已经查看了几个关于如何做到这一点的答案，并查看了以下示例

1 （我有两个SO答案的例子，但我还没有10个代表，也不能发布2个链接）

但出于某种原因，它只是不适合我。 Live demo它将它水平居中但垂直居中我在屏幕上得到了一个奇怪的右抱。我甚至试过在jQuery中做这个（下面的例子）并且它给了我相同的右拥抱作为我发现的2个SO答案，所以我知道必须有一些小问题。这是我的HTML和CSS：

HTML

<div
    class="parallax-image-wrapper parallax-image-wrapper-100"
    data-anchor-target="#dragons + .gap"
    data-bottom-top="transform:translate3d(0px, 200%, 0px)"
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">

    <div
        class="parallax-image parallax-image-100"
        style="background-image:url(images/pot.jpg)"
        data-anchor-target="#dragons + .gap"
        data-bottom-top="transform: translate3d(0px, -80%, 0px);"
        data-top-bottom="transform: translate3d(0px, 80%, 0px);"
    ></div>
    <!--the +/-80% translation can be adjusted to control the speed difference of the image-->

</div>

    <div class="gap gap-100">
        <h3 class="centerMe">Why waste edible food?</h3>
    </div>

CSS

    .centerMe
    {
            position: absolute;
            left: 50%;
            top: 50%;
            text-align: center;
    }

的jQuery

    $(document).ready(function(){

        $(window).resize(function(){

         $('.centerMe').css({
          position:'absolute',
          left: ($(window).width() 
            - $('.gap gap-100').outerWidth())/2,
          top: ($(window).height() 
            - $('.gap gap-100').outerHeight())/2
         });

        });

        // To initially run the function:
        $(window).resize();

       });

Answer 1

在你的调整大小解决方案的jquery中，你忘了减去文本div的宽度，你还需要除以浏览器宽度2来水平定位你的元素死点：

（文档）$。就绪（函数（）{

    $(window).resize(function(){

     $('.centerMe').css({
      position:'absolute',
      left: (($(window).width() /2) - ($('.centerMe').width() / 2)),
      top: ($(window).height() 
        - $('.gap gap-100').outerHeight())/2
     });

    });

    // To initially run the function:
    $(window).resize();

   });

Answer 2

将以下CSS3属性添加到.centerMe

.centerMe{

    /*text-align:center;*/
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

在此处详细了解：http://www.w3.org/TR/css-transforms-1/

祝你好运！

Answer 3

你可以在css中绝对居中，但你需要为你想要绝对居中的div定义一个高度和一个宽度。

<强> HTML

<div>
    <span>Absolute center</span>
</div>

<强> CSS

div{
  background: red;
  bottom: 0;
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  display:table;
}

span{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

看看这个例子： http://jsfiddle.net/mBBJM/4536/

试图居中时文本被干扰

3 个答案: