关于 top、left 结合 translate 实现居中的原理探讨

Kyxy 发布于2019-08-30 14:00 / 2636人阅读

摘要：关于结合实现居中的原理探讨前情提要在居中对齐的方法中常用的一种方法之一，就是使用绝对定位结合实现居中，探讨原理之前先来看一下实现代码和实现效果预览上面的实现效果最主要的代码如下解读由此可见主要是由的百分比和百分比实现的，那我们接下来就有

关于 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

混合云专线服务关于asp的工作原理关于后台服务器的原理 volatile的实现原理回调的原理、实现与应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115696.html

使一个div垂直+水平居中的几种方法

摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这...

joyqi 2019-08-29 11:04 评论0 收藏0
从一个居中方法说起 —— 谈 translate 与相对、绝对定位

摘要：方法介绍垂直水平居中是日常前端开发当中一个常见的需求，在支持属性的现代浏览器当中，有一个利用属性的垂直水平居中方法例子传送门请用现代浏览器打开从上面的例子看到，无论我们怎样调整窗口的大小，红色方块始终会在窗口垂直水平居中。方法介绍垂直水平居中是日常前端开发当中一个常见的需求，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法： .cente...

DandJ 2019-08-28 18:03 评论0 收藏0
css居中总结

摘要：前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。又必须有个父级对其进行设置居中。前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。水平居中行内元素水平居中行内元素的居中比较简单，直...

gxyz 2019-08-30 15:55 评论0 收藏0
老生常谈之CSS的垂直居中

摘要：在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。虽然没有垂直居中效果，但也是完全可以接受的。的另一个好处在于，它还可以将匿名容器即没有被标签包裹的文本节点垂直居中。主要摘自：《CSS 揭秘》，强烈推荐的一本书。 44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。——James Anderson(https://twitter.co...

CompileYouth 2019-08-30 15:55 评论0 收藏0
【第1期】聊聊css居中那点事

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。我们主要从这几个方面来了解下居中：水平居中垂直居中水平垂直居中水平...

刘永祥 2019-08-30 15:55 评论0 收藏0