Question

我已经搜索并阅读了其他帖子，但似乎没有一个对我有用。我只是有一个叠加，我切换有一个加载动画。我需要动画水平和垂直居中。我不能让垂直的部分工作。包含动画的叠加div和div的CSS：

#pageOverlay {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed;
  cursor: wait;
}
#floatingBarsG{
position:relative;
width:62px;
height:77px;
margin: auto;
}

HTML：

<div id="pageOverlay">
            <div id="floatingBarsG"> 
                <div class="blockG" id="rotateG_02"></div>
                <div class="blockG" id="rotateG_03"></div>
                <div class="blockG" id="rotateG_04"></div>
                <div class="blockG" id="rotateG_06"></div>
                <div class="blockG" id="rotateG_07"></div>
                <div class="blockG" id="rotateG_08"></div>
            </div>
        </div>

JSFiddle

Answer 1

您可以在top:50%;上使用margin-top:-38px;和#floatingBarsG，如下所示：

#floatingBarsG{
    ...
    top:50%;
    margin-top:-38px;
}

margin-top需要是height的一半。

检查demo以查看其工作情况。

Answer 2

See your updated fiddle.

由于您的#floatingBarsG div具有固定的宽度和高度，因此您可以使用以下CSS：

#floatingBarsG{
    position:absolute; /* Change the position to absolute. */
    width:62px;
    height:77px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

将position更改为absolute，并设置top，right，bottom和left属性，并结合使用margin: auto，您的加载div将垂直居中。

请注意，这种垂直居中方法仅在您的居中元素具有固定高度或最小高度时，以及当其父元素的position不是{时}时才有效{1}}。

C Travel's solution更多是跨浏览器（我相信我在IE8及以下版本中工作过，我相信），但只适用于固定高度。

Answer 3

How about this (I added a border around the animation for clarity):

#pageOverlay {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed;
  cursor: wait;
}

#floatingBarsG{
    border: 1px solid #f00;
    position:relative;
    width:62px;
    height:77px;
    top: 50%;
    margin: auto;
    margin-top: -38px;
}

Here's a fiddle of this

Answer 4

由于似乎没有其他人使用line-height发布示例，这是我的：

DEMO

这可以让父母拥有固定的身高和行高：

.parent { height: 50px; line-height: 50px; }

然后在孩子身上使用这些属性：

.child { display: inline-block; vertical-align: middle; }

垂直中心区

4 个答案: