CSS：如何在position:absolute的div中垂直居中

Question

我有这段代码：

<div class="parent">
    <div class="child">something</div>
</div>

父元素应该有200像素的宽度和高度，子元素应该有100像素的宽度和高度。父元素也被设置为 position:absolute。是否可能相对于父元素水平和垂直居中 child，如何实现？

结果：如果将黑色背景设置为父元素，将白色设置为子元素，则整个内容看起来像是一个带有大黑边框的白色正方形。

静态外边距和填充不可行，因为子元素的大小会动态变化。

---

这可能不是正确的解决方案，但我实际上想要实现的是一个黑色正方形，我可以使用 jQuery 更改其大小，并保持在相同的绝对位置，就像从中心缩放一样，而不是从左上角开始缩放。

我认为我可以设置父元素的位置，并让子元素在更改大小时自动水平和垂直居中，这样我就可以获得适当的“缩放”效果。

- Tony Bogdanov

---

那么你想要一个纯CSS的解决方案还是jQuery的？ - j08691

一个正在工作的问题。真正的问题在于，当我将边框从0动画到10时，并将顶部和左侧从它们当前的位置动画到-10时，它应该保持在同一位置，但实际上没有。有一个奇怪的1像素缓冲区，整个正方形先向右下方移动，然后向左上方移动，然后再次向右下方移动（到正确的位置）。我相当确定这是由于jQuery在计算.animate()的值时每个tick都会进行舍入所导致的。 - Tony Bogdanov

“子元素的宽度和高度为100像素”与“子元素的大小将动态改变”相矛盾。 - Phrogz

它不会改变，但边框会改变，所以效果是类似的，只是希望听起来更简单。 - Tony Bogdanov

Answer 1

既然您编辑了帖子并加入了jQuery：

   var c = $('.child'),
       cw = c.width(),
       ch = c.height(),
       hh = ch/2;

c.css({'position' : 'relative' , 'top' : '50%' , 'margin' : '0 auto' , 'margin-top' : '-' + hh + 'px' });

jsfiddle 这里

调整每个 div 的高度和宽度并重新运行以查看效果。

- SenorAmor

Answer 2

我使用了 jQuery UI position API 来定位子 div 在中心, 然后在 .animate 基础上，根据 border-width 更改 top 和 left 的值。

试着去尝试以下的 DEMO 以理解下方的代码 DEMO

动画完成后：

HTML：

<div class="parent">
    <div class="child">something</div>
</div>

<button>Animate</button>

JS：

$(document).ready (function () {
    positionChild();
});


function positionChild() {
    $( ".child" ).position({
                of: $( ".parent" ),
                my: "center center",
                at: "center center"
    });
}

$('button').click (function () {
    $('.child').animate({'border-width': 47, top: '-=46', left: '-=46'}, 1000);
});

CSS：

.parent { 
    position: absolute;  
    width: 200px; 
    height: 200px; 
    background-color: black; 
    top: 100px; 
    left: 100px; 
}

.child { 
    width: 100px; 
    height: 100px; 
    background-color: #c2c2c2; 
    border: 1px solid blue;
}

- Selvakumar Arumugam

---

你使用的是什么浏览器？在我的（Google Chrome）中，它仍然会抖动1像素——就像我的原始问题一样。我刚刚测试了，在Firefox中也会抖动。 - Tony Bogdanov

我在FF 10.0.2，Chrome 17.0.963.56中进行了测试，看起来很好。那是动画之前还是之后的1像素？ - Selvakumar Arumugam

一直以来.. 在我的片段中它在结尾。我想知道是否可以让 .animate() 跳动 10 次并且动画化 10px，这样每次跳动将恰好是 1px - 我可以排除我所考虑的四舍五入问题。 - Tony Bogdanov

@SKS，我使用的是与您相同的Chrome版本，我认为我看到了他所说的问题。查看此链接可能会有所帮助：http://jsfiddle.net/TheWaxMann/VGkEz/3/。我有增大和缩小按钮，这样您可以连续点击它们几次以查看发生了什么。如果我没错的话，在动画开始时，内部框似乎向上和向左移动了1像素，而在结束时它似乎向下和向右移动了1像素。Tony，我说得对吗？ - Andrew

我已经记录了闪烁/摆动并将动画持续时间降低到3000毫秒：http://www65.zippyshare.com/v/1587892/file.html 是的@TheWaxMann，完全正确。 - Tony Bogdanov

Answer 3

将父元素的line-height:200px设置为，子元素设置display:inline-block。您需要将子元素设置为line-height: 20px或其他值，并将其vertical-align: middle。

jsFiddle演示

看看这段代码：

.parent{
    position:absolute; 
    height:200px; 
    width:200px; 
    background:red;
    line-height:200px;
    text-align:center;
}
.child{
    background:blue; 
    width:100px; 
    height:100px; 
    display:inline-block;
    vertical-align:middle;
    line-height:20px;  /* or something else  */
}

- Mohsen Safari