共 2 条评论关于"未知高度div在屏幕上下左右居中fixed固定定位"
最新评论
谢谢你请我吃鸡腿*^_^*
支付宝扫一扫打赏
微信扫一扫打赏
居中定位很常见，可能你已经做前端3-5年了，但你针对未知内容高度div在屏幕中完全定位有完美解决办法吗？最近意外发现一种办法，通常固定定位我们宽度是固定的，但高度却不一定，就是说不给高度，让它如何根据自身内容去自动计算？
1 2 3 4 5 6 | div{ position:fixed; // 也可以是absolute top:50%; left:50%; transform:translate(-50%,-50%); } |
这种方法有什么好处？好处有2点，第一：不受内容多少的限制，第二：在移动端因为适配问题，可能在苹果6上你写好的固定宽高定位在其他设备上就出现细微的尺寸不对称。而在移动端有细微差别，就让人看起来显得那么明显的不协调。比如你在苹果6上文字排列的是5行，但在苹果5上某些时候可能发现文字排列的是6行，那么自然，在苹果5上，原本固定的尺寸高度就不够了，毕竟你再怎么自适应，因为文字多挤出了一行。
原理其实很简单，首先div通过定位将自身相对于屏幕上面和左边各50%；然后利用transform:translate，再将自身宽高的一半拉回去，就完全居中了，可以自己测试下，更好的体会它的神奇之处。
下一篇：vue路由守卫beforeEach死循环Uncaught RangeError: Maximum call stack size exceeded
最新评论
支付宝扫一扫打赏
微信扫一扫打赏
电话支持
173xxxx7240在线交流
微信添加
你从0开始教人制作一个简单的WP主题吧。估计比你这个文章受众更多。
@奶爸建网站笔记0基础手把手教怎么做主题的教程那得录制视频，光文字描述没多大用，录视频的话，正所谓台上三分钟台下十年功，我觉得这准备工作时间精力上，比较大，而且没讲好说不定还吐槽的一堆。