纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
下文以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>小牛知识库</title> <style type="text/css"> #box{ width:200px; height:150px; background:blue; position:relative; } #antzone{ background:green; } </style> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var oantzone=document.getElementById("antzone"); var w=oantzone.offsetWidth; var h=oantzone.offsetHeight; oantzone.style.position="absolute"; oantzone.style.left="50%"; oantzone.style.top="50%"; oantzone.style.marginLeft=-(w/2)+"px"; oantzone.style.marginTop=-(h/2)+"px"; } </script> </head> <body> <div id="box"> <spanj id="antzone">小牛知识库</span> </div> </body> </html>
上面你的代码实现了span元素在div中垂直水平居中效果，下面简单介绍一下它的实现过程。
一.实现原理:
虽然css为明确给出span元素的尺寸，但是它毕竟有一个尺寸的，这个尺寸可以使用offsetWidth和offsetHeight属性获取，然后将此span元素设置为绝对定位，然后再将left和top属性值分别设置为50%,但是这个时候并不是span元素的中心点垂直水平居中，而是span元素的左上角垂直水平居中，然后在设置span元素的负的外边距，尺寸是span元素宽高的一半，这样就实现了垂直水平居中效果。
以上就是本文的全部内容，今天就到此为止，后续给大家更新scrollTop、offsetHeight和offsetTop等属性用法详解，请持续关注本站，谢谢。
-
本文向大家介绍javascript实现在指定元素中垂直水平居中，包括了javascript实现在指定元素中垂直水平居中的使用技巧和注意事项，需要的朋友参考一下 本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果，下面就以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下: 上面你的代码实现了span元素在div中垂直水平居中效果，下面简单介绍
-
问题内容： 我试图将标签内容垂直居中，但是当我添加CSS样式时，水平文本对齐会消失。 如何为我的每个标签使文本对齐x和y？ 问题答案： 方法1- / ： 在受支持的浏览器（大多数）中，可以将/ 与组合使用， 以动态垂直/水平居中元素。 方法2-Flexbox方法： 在支持的浏览器中，将目标元素的设置为并用于垂直居中和水平居中。只是不要忘记为其他浏览器支持添加供应商前缀。 方法3- / ： 在某些情
-
我正在尝试垂直居中我的选项卡内容，但是当我添加CSS样式时，水平文本对齐消失了。 我如何使文本对齐x和y为我的每个选项卡？ null null
-
本文向大家介绍如何实现元素的垂直居中？相关面试题，主要包含被问及如何实现元素的垂直居中？时的应答技巧和注意事项，需要的朋友参考一下 参考回答： 法一：父元素display:flex,align-items:center; 法二：元素绝对定位，top:50%，margin-top：-（高度/2） 法三：高度不确定用transform：translateY（-50%） 法四：父元素table布局，子元
-
问题内容： 有什么办法可以将html元素垂直或水平居中放置在主要父对象中？ 问题答案： 更新 ：虽然这个答案早在2013年初就可能是正确的，但现在不应该再使用。正确的解决方案使用offsets。 至于其他用户的建议，也可以使用本机引导程序类，例如：
-
有没有办法将html元素垂直或水平地集中在主父元素中？