css子控件居中显示

在CSS中，居中显示是Web开发者最为熟悉的CSS难题之一。

parent {
position: relative;
}
child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上述代码结构中，一个命名为 'parent' 的元素作为父元素，包含一个被称为 'child' 的子元素。对于子元素来说，我们设定了 absolute 定位并且使用了 'top' 和 'left' 属性，使其与其容器的中心点对齐。接下来的 "transform" 属性通过 "translate" 将子元素的位置移动到完美的居中位置。

这个方法在图像、标题和其他可自我尺寸的元素居中时非常有效。它值得指出的是，该技巧对于元素大小的变化是相对依赖的。因此，当子元素大小发生变化时，它的相应位置也应当跟随变化。