純js代碼實現(xiàn)未知寬高的元素在指定元素中垂直水平居中顯示
更新時間：2015年09月12日 16:41:51 作者：愚蠢的神
本章節(jié)介紹一下如何實現(xiàn)未知寬高的元素在指定元素下實現(xiàn)垂直水平居中效果，代碼簡單易懂，需要的朋友可以參考下本文
下文以span元素為例子，介紹一下如何實現(xiàn)span元素在div中實現(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>
上面你的代碼實現(xiàn)了span元素在div中垂直水平居中效果，下面簡單介紹一下它的實現(xiàn)過程。
一.實現(xiàn)原理:
雖然css為明確給出span元素的尺寸，但是它畢竟有一個尺寸的，這個尺寸可以使用offsetWidth和offsetHeight屬性獲取，然后將此span元素設(shè)置為絕對定位，然后再將left和top屬性值分別設(shè)置為50%,但是這個時候并不是span元素的中心點垂直水平居中，而是span元素的左上角垂直水平居中，然后在設(shè)置span元素的負(fù)的外邊距，尺寸是span元素寬高的一半，這樣就實現(xiàn)了垂直水平居中效果。
以上就是本文的全部內(nèi)容，今天就到此為止，后續(xù)給大家更新scrollTop、offsetHeight和offsetTop等屬性用法詳解，請持續(xù)關(guān)注本站，謝謝。
相關(guān)文章
微信小程序最近比較熱，今天小編抽空做了一個客服機(jī)器人的小程序，下面小編給大家分享微信小程序自動客服功能，需要的朋友參考下吧2017-11-11
HTTP請求中,Content-Type頭部用于指定請求體或響應(yīng)體的類型,常見的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用請求方式包括Get、Post、Put、Delete2024-09-09
這篇文章主要介紹了JavaScript截取字符串的2個函數(shù)介紹,它們分別是substring和substr函數(shù),本文用實例講解了它們的用法,需要的朋友可以參考下2014-08-08
本文主要分享了canvas紅包照片的實例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這個select2組件的功能確實很強大，可以將圖片放入到select里面隨著文字一起顯示。接下來通過本文給大家分享BootStrap與Select2使用小結(jié)，需要的朋友參考下2017-02-02
javascript間隔定時器(延時定時器)學(xué)習(xí) 間隔調(diào)用和延時調(diào)用
這篇文章主要介紹了javascript間隔調(diào)用和延時調(diào)用示例,介紹setInterval方法和clearInterval方法的使用方法，大家參考使用吧2014-01-01
Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的方法詳解
眾所周知Gulp.js 是一個自動化構(gòu)建工具,開發(fā)者可以使用它在項目開發(fā)過程中自動執(zhí)行常見任務(wù)。下面這篇文章主要給大家介紹了關(guān)于Gulp實現(xiàn)靜態(tài)網(wǎng)頁模塊化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-01-01
javascript 一個函數(shù)對同一元素的多個事件響應(yīng)
具體方法如下該方法實現(xiàn)了對一個按鈕的mouseover和click事件的響應(yīng)2009-07-07
本文主要分享一個簡易的上傳頭像示例以及其大致流程、實現(xiàn)過程中需要注意的事項。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12![js為什么[]==![]是成立的嗎](http://img.jbzj.com/images/xgimg/bcimg9.png)
本文主要介紹了js為什么[]==![]是成立的嗎，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01