純js代碼實(shí)現(xiàn)未知寬高的元素在指定元素中垂直水平居中顯示

更新時(shí)間：2015年09月12日 16:41:51 作者：愚蠢的神

本章節(jié)介紹一下如何實(shí)現(xiàn)未知寬高的元素在指定元素下實(shí)現(xiàn)垂直水平居中效果，代碼簡(jiǎn)單易懂，需要的朋友可以參考下本文

下文以span元素為例子，介紹一下如何實(shí)現(xiàn)span元素在div中實(shí)現(xiàn)水平垂直居中效果，代碼如下:

<!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>

上面你的代碼實(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)了垂直水平居中效果。

以上就是本文的全部?jī)?nèi)容，今天就到此為止，后續(xù)給大家更新scrollTop、offsetHeight和offsetTop等屬性用法詳解，請(qǐng)持續(xù)關(guān)注本站，謝謝。

您可能感興趣的文章:

相關(guān)文章

微信小程序自動(dòng)客服功能
微信小程序最近比較熱，今天小編抽空做了一個(gè)客服機(jī)器人的小程序，下面小編給大家分享微信小程序自動(dòng)客服功能，需要的朋友參考下吧
2017-11-11
解讀請(qǐng)求方式Method和請(qǐng)求類型Content-Type
HTTP請(qǐng)求中,Content-Type頭部用于指定請(qǐng)求體或響應(yīng)體的類型,常見(jiàn)的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用請(qǐng)求方式包括Get、Post、Put、Delete
2024-09-09
JavaScript截取字符串的2個(gè)函數(shù)介紹
這篇文章主要介紹了JavaScript截取字符串的2個(gè)函數(shù)介紹,它們分別是substring和substr函數(shù),本文用實(shí)例講解了它們的用法,需要的朋友可以參考下
2014-08-08
canvas紅包照片實(shí)例分享
本文主要分享了canvas紅包照片的實(shí)例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
BootStrap與Select2使用小結(jié)
這個(gè)select2組件的功能確實(shí)很強(qiáng)大，可以將圖片放入到select里面隨著文字一起顯示。接下來(lái)通過(guò)本文給大家分享BootStrap與Select2使用小結(jié)，需要的朋友參考下
2017-02-02
javascript間隔定時(shí)器(延時(shí)定時(shí)器)學(xué)習(xí) 間隔調(diào)用和延時(shí)調(diào)用
這篇文章主要介紹了javascript間隔調(diào)用和延時(shí)調(diào)用示例,介紹setInterval方法和clearInterval方法的使用方法，大家參考使用吧
2014-01-01
Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁(yè)模塊化的方法詳解
眾所周知Gulp.js 是一個(gè)自動(dòng)化構(gòu)建工具,開(kāi)發(fā)者可以使用它在項(xiàng)目開(kāi)發(fā)過(guò)程中自動(dòng)執(zhí)行常見(jiàn)任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實(shí)現(xiàn)靜態(tài)網(wǎng)頁(yè)模塊化的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。
2018-01-01
javascript 一個(gè)函數(shù)對(duì)同一元素的多個(gè)事件響應(yīng)
具體方法如下該方法實(shí)現(xiàn)了對(duì)一個(gè)按鈕的mouseover和click事件的響應(yīng)
2009-07-07
淺析上傳頭像示例及其注意事項(xiàng)
本文主要分享一個(gè)簡(jiǎn)易的上傳頭像示例以及其大致流程、實(shí)現(xiàn)過(guò)程中需要注意的事項(xiàng)。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
js為什么[]==![]是成立的嗎
本文主要介紹了js為什么[]==![]是成立的嗎，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01