摘要：关于结合实现居中的原理探讨前情提要在居中对齐的方法中常用的一种方法之一，就是使用绝对定位结合实现居中，探讨原理之前先来看一下实现代码和实现效果预览上面的实现效果最主要的代码如下解读由此可见主要是由的百分比和百分比实现的，那我们接下来就有
关于 top、left 结合 translate 实现居中的原理探讨 前情提要
在居中对齐的方法中常用的一种方法之一，就是使用绝对定位结合 translate、top、left实现居中，探讨原理之前先来看一下实现代码和实现效果：
预览
上面的实现效果最主要的代码如下：
.out {
position: relative;
}
.in {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
解读：由此可见主要是由top、left的百分比和translate百分比实现的，那我们接下来就有必要讲一下两者百分比的原理了：
top、left的百分比的原理从上述的代码和效果中可以看出，居中对齐的实现是依靠了top/left的的百分比来实现的，而且还是正的百分比，下面我们先给出其百分比和位置的公式：
X（内X轴偏移量） = width（外） * left百分比（内）
Y（内Y轴偏移量） = height（外） * top百分比（内）
演示：
预览
translate的百分比的原理从上述的代码和效果中可以看出，居中对齐的实现是还依靠了translate，而且还是负的百分比，下面我们先给出它百分比和位置的公式：
X（内X轴偏移量） = width（内） * translateX百分比（内）
Y（内Y轴偏移量） = height（内） * translateY百分比（内）
演示
预览
总结从上述的原理解读中可以看出最终的位置的计算公式是：
X（内X轴偏移量） = width（外） left百分比（内） + width（内） translateX百分比（内）
Y（内Y轴偏移量） = height（外） top百分比（内） + height（内） translateY百分比（内）
即：
X（内X轴偏移量） = 300 50% + 100 -50% = 100
Y（内X轴偏移量） = 300 50% + 100 -50% = 100
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115696.html
摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内 前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这...
摘要：方法介绍垂直水平居中是日常前端开发当中一个常见的需求，在支持属性的现代浏览器当中，有一个利用属性的垂直水平居中方法例子传送门请用现代浏览器打开从上面的例子看到，无论我们怎样调整窗口的大小，红色方块始终会在窗口垂直水平居中。 方法介绍 垂直水平居中是日常前端开发当中一个常见的需求，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法： .cente...
摘要：在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。虽然没有垂直居中效果，但也是完全可以接受的。的另一个好处在于，它还可以将匿名容器即没有被标签包裹的文本节点垂直居中。 主要摘自：《CSS 揭秘》，强烈推荐的一本书。 44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中 实现垂直居中。——James Anderson(https://twitter.co...
摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。 前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。 我们主要从这几个方面来了解下居中： 水平居中 垂直居中 水平垂直居中 水平...
阅读 2105·2021-11-05 09:42
阅读 2849·2021-09-23 11:21
阅读 2840·2019-08-30 14:00
阅读 3313·2019-08-30 13:15
阅读 464·2019-08-29 17:18
阅读 3546·2019-08-29 16:29
阅读 2748·2019-08-29 14:06
阅读 2793·2019-08-23 14:41
