AI 助理
备案控制台
开发者社区 人工智能 文章 正文

让一个div盒子在浏览器视窗中居中的算法

2021-11-13 200
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 让一个div盒子在浏览器视窗中居中的算法

算法思路

  • div.left = （视窗宽度-div的offsetWidth）/2

代码

var oDiv = document.getElementById('div1');
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
var divW = oDiv.offsetWidth;
var divH = oDiv.offsetHeight;
oDiv.style.left = (clientW - divW)/2 + 'px';
oDiv.style.top = (clientH - divH)/2 + 'px';

效果

image.png

代码地址

点击这里


文章标签：
算法
关键词：
div浏览器
浏览器div
盒子算法
答案命运
目录
相关文章
lvbb66
|
5月前
|
JavaScript 前端开发
如何让div的宽高始终等于浏览器宽高的一半
如何让div的宽高始终等于浏览器宽高的一半
lvbb66
40 2
朝阳39
|
6月前
div高度填满浏览器剩余空间（不出现纵向滚动条）
div高度填满浏览器剩余空间（不出现纵向滚动条）
朝阳39
58 0
碳基肥宅
|
8月前
|
算法
循环嵌套思路详解 | 一个“在盒子里过家家”的算法 －－ 以冒泡排序与打印菱形为例（一）
本文介绍了编程中的一种思想，通过菱形打印问题来阐述如何理解和使用循环嵌套。文章提到，初学者在面对循环结构时，可以通过先识别代码块的结束括号来理解整体结构，提高阅读效率。作者提出了“在盒子里过家家”的理解思路，将外层循环看作一个个盒子，内层循环视为盒子里的操作，弱化循环嵌套的概念，强调以盒子为单位思考问题。此外，文章还通过示例解释了内外循环的关系，帮助读者更好地理解循环控制和执行过程。
碳基肥宅
118 3
碳基肥宅
|
8月前
|
算法
循环嵌套思路详解 | 一个“在盒子里过家家”的算法 －－ 以冒泡排序与打印菱形为例（二）
本文介绍了如何运用特定思路解析和解决编程问题，特别是涉及双层循环的情况。首先，通过一个打印特定图案的例子，解释了将“盒子”作为思考单位的概念，即分析问题中每个循环的作用和内容。接着，以冒泡排序为例，展示了如何将问题分解为外层循环（趟数）和内层循环（每趟的比较与交换），并通过盒子思路简化理解和实现代码。最后，提到了菱形打印的代码优化，鼓励读者思考并应用这种思维方式。总的来说，文章强调了自然地理解和运用循环结构，而不是机械地记忆。
碳基肥宅
82 2
闻缺陷则喜何志丹
|
8月前
|
移动开发 算法 测试技术
【动态规划】【记忆化搜索】C++算法：546移除盒子
【动态规划】【记忆化搜索】C++算法：546移除盒子
闻缺陷则喜何志丹
89 2
闻缺陷则喜何志丹
|
8月前
|
移动开发 算法 测试技术
【动态规划】【记忆化搜索】C++算法：546移除盒子
【动态规划】【记忆化搜索】C++算法：546移除盒子
闻缺陷则喜何志丹
74 0
兜里只有三分钱~
div固定在浏览器顶部
div固定在浏览器顶部
兜里只有三分钱~
60 0
卡尔特斯
|
前端开发
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
卡尔特斯
239 0
派小星_
往 p 标签里放了个 div，把浏览器都给整不会了
块级元素： 不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）
派小星_
115 0
往 p 标签里放了个 div，把浏览器都给整不会了
二当家的白帽子
|
Rust 算法 安全
【算法学习】1769. 移动所有球到每个盒子所需的最小操作数（java / c / c++ / python / go / rust）
有 n 个盒子。给你一个长度为 n 的二进制字符串 boxes ，其中 boxes[i] 的值为 '0' 表示第 i 个盒子是 空 的，而 boxes[i] 的值为 '1' 表示盒子里有 一个 小球。 在一步操作中，你可以将 一个 小球从某个盒子移动到一个与之相邻的盒子中。第 i 个盒子和第 j 个盒子相邻需满足 abs(i - j) == 1 。注意，操作执行后，某些盒子中可能会存在不止一个小球。 返回一个长度为 n 的数组 answer ，其中 answer[i] 是将所有小球移动到第 i 个盒子所需的 最小 操作数。 每个 answer[i] 都需要根据盒子的 初始状态 进行计算。
二当家的白帽子
184 1
【算法学习】1769. 移动所有球到每个盒子所需的最小操作数（java / c / c++ / python / go / rust）

热门文章

最新文章

  • 1
    Agent-E：基于 AutoGen 代理框架构建的 AI 浏览器自动化系统
  • 2
    Magic Copy：开源的 AI 抠图工具，在浏览器中自动识别图像进行抠图
  • 3
    浏览器安全
  • 4
    Codel：AI代理工具，支持在终端、浏览器、编辑器执行复杂任务和项目
  • 5
    怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev
  • 6
    浏览器自动化
  • 7
    浏览器渲染过程中如何处理异步任务
  • 8
    Web端IM聊天消息该不该用浏览器本地存储？一文即懂！
  • 9
    宏任务和微任务在浏览器渲染过程中的执行顺序
  • 10
    跨浏览器和跨平台
  • 1
    【Paddle】PCA线性代数基础 + 领域应用：人脸识别算法（1.1w字超详细：附公式、代码）
    130
  • 2
    BASE64的算法说明
    70
  • 3
    算法人生（1）：从“强化学习”看如何“战胜拖延”
    120
  • 4
    理解并应用机器学习算法：决策树
    152
  • 5
    【机器学习】在使用K-means聚类算法时，如何选择K的值？
    454
  • 6
    【机器学习】为什么K-means算法使用欧式距离度量？
    443
  • 7
    【机器学习】描述K-means算法的步骤
    160
  • 8
    【机器学习】K-means和KNN算法有什么区别？
    692
  • 9
    C语言易混淆、简单算法、结构体题目练习、常见关键字总结-2
    64
  • 10
    C语言易混淆、简单算法、结构体题目练习、常见关键字总结-1
    67

    • 相关课程

    更多
  • 智能运维赛（复赛）：利用数据和算法，快速定位系统异常并进行根因分析
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 相册服务中的故事生成算法介绍
  • Go语言核心编程 - 数据结构和算法
  • 神经网络概览及算法详解

    • 相关电子书

    更多
  • WEB浏览器中即将发生的安全变化
  • 基于浏览器的实时构建探索之路
  • 基于浏览器的实时构建探索之路--玄寂

    • 相关实验场景

    更多
  • 使用Swing算法实现商品推荐
  • RSA密码算法设计与实现
  • 欧拉图的构造性证明与算法实现
  • 推荐系统入门之使用ALS算法实现打分预测
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅