快捷導(dǎo)航

javascript實(shí)現(xiàn)在指定元素中垂直水平居中

更新時(shí)間：2015年09月13日 10:41:05 投稿：hebedich

當(dāng)談到網(wǎng)頁(yè)的布局中，居中問(wèn)題一直得不到很有效的解決，居中通常是相對(duì)于某一個(gè)元素的，比如我們經(jīng)常所說(shuō)的屏幕居中的問(wèn)題，我們了解父元素的信息越多，我們就越能更加容易的實(shí)現(xiàn)居中布局。下面我們通過(guò)具體的實(shí)例來(lái)看看javascript如何來(lái)實(shí)現(xiàn)垂直水平居中

本章節(jié)介紹一下如何實(shí)現(xiàn)未知寬高的元素在指定元素下實(shí)現(xiàn)垂直水平居中效果，下面就以span元素為例子，介紹一下如何實(shí)現(xiàn)span元素在div中實(shí)現(xiàn)水平垂直居中效果，代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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>

上面你的代碼實(shí)現(xiàn)了span元素在div中垂直水平居中效果，下面簡(jiǎn)單介紹一下它的實(shí)現(xiàn)過(guò)程。

一.實(shí)現(xiàn)原理:
雖然css為明確給出span元素的尺寸，但是它畢竟有一個(gè)尺寸的，這個(gè)尺寸可以使用offsetWidth和offsetHeight屬性獲取，然后將此span元素設(shè)置為絕對(duì)定位，然后再將left和top屬性值分別設(shè)置為50%,但是這個(gè)時(shí)候并不是span元素的中心點(diǎn)垂直水平居中，而是span元素的左上角垂直水平居中，然后在設(shè)置span元素的負(fù)的外邊距，尺寸是span元素寬高的一半，這樣就實(shí)現(xiàn)了垂直水平居中效果。

例子二：

思路：實(shí)現(xiàn)起來(lái)最麻煩的其實(shí)是水平居中和垂直居中，其中垂直居中是最麻煩的。考慮到瀏覽器兼容性，網(wǎng)上看了一些資料，發(fā)現(xiàn)在頁(yè)面中垂直居中確實(shí)沒有什么太好的辦法。于是就采用了position：fixed屬性控制時(shí)鐘的絕對(duì)位置，通過(guò)clientWidth和clientHeight來(lái)獲取時(shí)鐘的寬和高，利用javascript控制marginLeft和marginTop來(lái)居中時(shí)鐘。

<!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; 
      padding: 0; 
    } 
     
    .center{ 
      position: fixed; 
      left: 50%; 
      top: 50%; 
    } 
 
    .box{ 
      border: 1px solid #000; 
      padding: 20px 30px; 
      font-size: 1.5em; 
      font-weight: 500; 
      margin: auto auto; 
    } 
 
  </style> 
</head> 
<body> 
  <div class="center"> 
    <p class="box"></p> 
  </div> 
</body> 
<script type="text/javascript"> 
  window.onload = function () { 
     
    getTimes(); 
    var box = document.getElementsByClassName("box")[0]; 
    box.style.marginLeft = -box.clientWidth / 2 + "px"; 
    box.style.marginTop = -box.clientHeight / 2 + "px"; 
    setInterval(getTimes, 1000); 
  } 
 
  function getTimes() { 
 
    var box = document.getElementsByClassName("box")[0]; 
 
    var dateTime = new Date(); 
    var year = dateTime.getFullYear(); 
    var date = dateTime.getDate(); 
    var month = dateTime.getMonth() + 1; 
    var hours = dateTime.getHours(); 
    var minutes = dateTime.getMinutes(); 
    var secondes = dateTime.getSeconds(); 
 
    box.innerHTML = year + "-" + format(month) + "-" + format(date) + " " + format(hours) + ":"+ format(minutes) +":" + format(secondes); 
  } 
 
  function format(a) { 
    return a.toString().replace(/^(\d)$/, "0$1"); 
  } 
 
</script> 
</html>

例子三：

思路：采用相對(duì)定位，設(shè)定left和top值為(pw-w)/2和(ph-h)/w，其中pw和ph為外部標(biāo)簽的寬與高，w和h為內(nèi)部標(biāo)簽的寬與高。

核心代碼：