top,left结合translate实现居中原理的讨论，left实现居中，在讨论原理之前先看一下实现代码和实现效果：预览上面实现效果最重要的代码如下:.out{位置：相对；}.in{位置：绝对；顶部：50%；左：50%；transform:translate(-50%,-50%);}解释：可以看出主要是通过top和left的百分比以及translate的百分比来实现的，所以接下来要说说两者的百分比原理：top和left百分比的原理从上面的代码和效果可以看出，居中对齐的实现是通过top/left的百分比来实现的，而且还是正百分比。我们先给出另一个百分比和位置的公式：X（内部X轴偏移）=宽度（外部）*左边百分比（内部）Y（内部Y轴偏移）=高度（外部）*顶部百分比（内部）Demo:Previewtranslate百分比的原理从上面的代码和效果可以看出，居中对齐的实现也依赖于translate，而且还是负百分比。下面我们先给出它的百分比和位置的公式：X（内X轴偏移量）=宽度（内）*translateX百分比（内）Y（内Y轴偏移）=高度（内）*translateY百分比（内）demo预览总结从上面的原理解读，我们可以看出最终位置的计算公式为：X(innerX轴偏移量)=width(outer)leftpercentage(inner)+width(inner)translateXpercentage(inner)Y（内Y轴偏移）=高度（外）顶百分比（内）+高度（内）平移Y百分比（内）即：X（内X轴偏移）=30050%+100-50%=100Y（内部X轴偏移）=30050%+100-50%=100
