JS實(shí)現(xiàn)div居中示例
更新時(shí)間：2014年04月17日 15:18:59 作者：
div居中的方法有很多，網(wǎng)上可以找得到，但是本文要介紹的是使用JS實(shí)現(xiàn)的，比較另類，大家不妨參考下
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS實(shí)現(xiàn)div居中</title>
<style>
/*外層div居中*/
#main {
position: absolute; /*極為重要*/
background-color: blue;
width:400px;
height:200px;
/*left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;*/
border:1px solid #00F;
}
#content {
position: absolute; /*極為重要*/
background-color: yellow;
width: 200px;
height: 100px;
/*left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;*/
/*div內(nèi)部文字居中*/
text-align: center;
line-height:100px; /*行間距和div寬度相同*/
}
</style>
<body>
<div id="main">
<div id="content">
Sun
</div>
</div>
<script type="text/javascript">
window.onload = function() {
// 獲取瀏覽器窗口
var windowScreen = document.documentElement;
// 獲取main的div元素
var main_div = document.getElementById("main");
// 通過(guò)窗口寬高和div寬高計(jì)算位置
var main_left = (windowScreen.clientWidth - main_div.clientWidth)/2 + "px";
var main_top = (windowScreen.clientHeight - main_div.clientHeight)/2 + "px";
// 位置賦值
main_div.style.left = main_left;
main_div.style.top = main_top;
// 獲取mcontent的div元素
var content_div = document.getElementById("content");
var content_left = (main_div.clientWidth - content_div.clientWidth)/2 + "px";
var content_top = (main_div.clientHeight - content_div.clientHeight)/2 + "px";
content_div.style.left = content_left;
content_div.style.top = content_top;
}
</script>
</body>
</html>
相關(guān)文章
JavaScript獲取radio選中值的幾種常用方法小結(jié)
這篇文章主要介紹了JavaScript獲取radio選中值的幾種常用方法,結(jié)合實(shí)例形式總結(jié)分析了javascript獲取radio選中值的常見(jiàn)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2023-06-06
layuiAdmin循環(huán)遍歷展示商品圖片列表的方法
今天小編就為大家分享一篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了typescript配置alias，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
通過(guò)復(fù)制Table生成word和excel的javascript代碼
通過(guò)復(fù)制Table生成word和excel，個(gè)人感覺(jué)這個(gè)功能還是比較實(shí)用的，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助2014-01-01
二叉樹(shù)先序遍歷的非遞歸算法具體實(shí)現(xiàn)
這篇文章主要介紹了二叉樹(shù)先序遍歷的非遞歸算法，有需要的朋友可以參考一下2014-01-01
今天小編就為大家分享一篇關(guān)于js的對(duì)象與函數(shù)詳解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
作用域是JavaScript最重要的概念之一，想要學(xué)好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對(duì)JavaScript作用域示例詳解的介紹，非常不錯(cuò)，感興趣的朋友一起看下吧2016-07-07
本篇文章主要介紹了JS中傳遞參數(shù)的幾種不同方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
highlight.js是一款輕量級(jí)的Web代碼語(yǔ)法高亮庫(kù)。下面通過(guò)實(shí)例代碼給大家分享JS庫(kù)之Highlight.js的用法詳解，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-09-09
在Ajax中使用Flash實(shí)現(xiàn)跨域數(shù)據(jù)讀取的實(shí)現(xiàn)方法
今天，小子再提供一種使用Flash進(jìn)行跨域操作的方法。眾所周之，其實(shí)Flash的跨域操作也是有限制的，不過(guò)，F(xiàn)lash的跨域配置比簡(jiǎn)單，只需要在站點(diǎn)根目錄下放置crossdomain.xml即可。2010-12-12