CSS：在一个位置垂直居中：绝对div答案

【问题标题】：CSS: Vertical centering in a position:absolute divCSS：在一个位置垂直居中：绝对div
【发布时间】：2012-03-21 09:05:23
【问题描述】：

我有这个代码：

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

父节点的宽度和高度应为 200 像素，子节点的宽度和高度应为 100 像素。父级也设置为position:absolute。是否可以将child 相对于parent 水平和垂直居中以及如何？

结果：如果将黑色背景设置为父级，将白色设置为子级，整个事物应该看起来像有一个带有黑色大边框的白色方块。

静态边距和填充是不可能的，因为孩子的大小会动态变化。

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

我想我可以设置父级的位置，让子级自动水平和垂直居中，同时改变它的大小，这样我会得到适当的类似“缩放”的效果。

【问题讨论】：

那么您想要纯 CSS 解决方案还是 jQuery 解决方案？
一个真正的工作。真正的问题是，例如，当我将边框从 0 设置为 10 时，我将顶部和左侧从当前位置设置为 -10 时，它应该保持在同一个位置，但不会......有一个奇怪的 1 像素缓冲区，整个正方形从右下角然后左上角然后再右下角（到正确的位置）。我很确定它来自 jQuery 计算 .animate() 的值时在每个刻度上发生的舍入。
“孩子100px宽高”与“孩子的大小会动态变化”相矛盾。
不会变，但是边框会变，所以效果差不多，只是想听起来更简单。

标签： jquery html css alignment

【解决方案1】：

我使用jQuery UI position API 将子 div 定位在中心，然后基于border-width 在.animate 上，您应该相应地更改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;
}

【讨论】：

你用的是什么浏览器？在我的（谷歌浏览器）中它仍然摆动 1px - 就像我原来的问题一样。我刚刚测试过，它也在 Firefox 中摆动。
我在 FF 10.0.2、Chrome 17.0.963.56 中测试过，看起来还不错。那是动画前的1px还是动画后的1px？
一直......在我的 sn-p 中它在最后。我想知道我是否可以让.animate() 打勾 10 次并设置 10 像素动画，所以每个刻度都恰好是 1 像素 - 我可以排除我正在考虑的舍入问题..
@Tony 我还在努力理解你所说的这个 1px ......你看到图片了吗？它在哪里关闭了 1 像素？
@SKS 我正在使用与您相同的 chrome 版本，我想我看到了他所说的问题。看看这个link 可能会有所帮助，我有放大和缩小按钮，这样您就可以连续单击它们几次以查看发生了什么。如果我是对的，在动画的一开始，内框看起来像是向上和向左移动了 1px，最后它似乎向下和向右移动了 1px。托尼，我说得对吗？

【解决方案2】：

因为您编辑了您的帖子以包含 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 here

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

【讨论】：

【解决方案3】：

将line-height:200px 设置为父级，将display:inline-block 设置为子级。您需要将line-height: 20px 或其他东西和vertical-align:middle 设置为孩子。

jsFiddle DEMO

看看这段代码：

.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  */
}

【讨论】：