javascript实现在指定元素中垂直水平居中

本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果，下面就以跨度元素为例子，介绍一下如何实现跨度元素在差异中实现水平垂直居中效果，代码如下：

！DOCTYPE html html hearteta charset=' utf-8 ' style=' text/CSS ' # box { width :200 px；高度：150 px背景：蓝色；位置：相对；} #蚂蚁区{背景：绿色；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var obox=document。getelementbyid(' box ')；var oantzone=document。getelementbyid(' ant zone ')；var w=oantzone . offsetwidthvar h=oantzone . offsethethightoandzone。风格。位置='绝对'；奥安佐内。风格。左=' 50% '；奥安佐内。风格。top=' 50% '；奥安佐内。风格。左边距=-(w/2)“px”；奥安佐内。风格。上边距=-(h/2)“px”；}/script/head dydiv id=' box ' spanj id=' ant zone '我们/span/div/body/html上面你的代码实现了跨度元素在差异中垂直水平居中效果，下面简单介绍一下它的实现过程。

一。实现原理：虽然钢性铸铁为明确给出跨度元素的尺寸，但是它毕竟有一个尺寸的，这个尺寸可以使用在中间和偏右属性获取，然后将此跨度元素设置为绝对定位，然后再将左边的和顶端属性值分别设置为50%,但是这个时候并不是跨度元素的中心点垂直水平居中，而是跨度元素的左上角垂直水平居中，然后在设置跨度元素的负的外边距，尺寸是跨度元素宽高的一半，这样就实现了垂直水平居中效果。

例子二：

思路：实现起来最麻烦的其实是水平居中和垂直居中，其中垂直居中是最麻烦的。考虑到浏览器兼容性，网上看了一些资料，发现在页面中垂直居中确实没有什么太好的办法。于是就采用了位置：固定属性控制时钟的绝对位置，通过clientWidth和clientHeight来获取时钟的宽和高，利用爪哇岛描述语言控制边距英尺和marginTop来居中时钟。

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title centered Clock/title style type=' text/CSS ' body { background : # fff；} body，div，p { margin : 0；padd : 0；} .中心{位置：固定；左侧： 50%;前：名50%；} .box { border : 1px solid # 000 padd : 20px 30px font-size : 1.5 em；字体粗细： 500；margin : auto }/style/head body div class=' center ' p class=' box '/p/div/body script type=' text/JavaScript ' window。onload=function(){ getTimes()；var box=文档。getelementsbyclassname(' box ')[0]；盒子。风格。左边距=-框。客户端宽度/2 ' px '；盒子。风格。marginTop=-box。客户端高度/2 ' px '；setInterval(getTimes，1000)；}函数getTimes(){ var box=document。getelementsbyclassname(' box ')[0]；var dateTime=新日期();var year=日期时间。getfull year()；var date=datetime。getdate()；var month=日期时间。get month()1；var hours=日期时间。gethours()；var分钟=日期时间。getminutes()；var秒=日期时间。getseconds()；盒子。inner html=year '-' format(month)'-' format(date)' ' format(hours)' : ' format(minutes)' : ' format(seconds)；}函数格式(a) {返回a.toString().replace(/^(\d)$/,'0美元1';}/脚本/html例子三：

思路：采用相对定位，设定左边的和顶端值为(pw-w)/2和(ph-h)/w，其中女警和公共卫生为外部标签的宽与高，w和h为内部标签的宽与高。

核心代码：

以上就是给大家总结的三种爪哇岛描述语言实现居中的例子，小伙伴们可以参考下，希望对大家能够有所帮助。