設置一個DIV塊固定在屏幕中央（兩種方法）
方法一：
對一個div進行如下設置便可實現居中。html
<style>
#a{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
</head>
<body>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<div id="a">
sdvcdvf
</div>
</body>
</html>
效果：瀏覽器
方法二：
使用js操做div的屬性爲下面這樣便可實現居中。spa
<style>
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
position: fixed;
}
</style>
<script>
window.onload=function(){
var a = document.getElementById("a");//獲取div塊對象
var Height=document.documentElement.clientHeight;//取得瀏覽器頁面可視區域的寬度
var Width=document.documentElement.clientWidth;//取得瀏覽器頁面可視區域的寬度
var gao1 = a.offsetHeight;//獲取div塊的高度值
var gao2 = a.offsetWidth;//獲取div塊的寬度值
var Sgao1= (Height - gao1)/2+"px";
var Sgao2= (Width - gao2)/2+"px";
a.style.top=Sgao1;
a.style.left=Sgao2;
}
</script>
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#a{
width: 200px;
height: 200px;
background-color: aquamarine;
position: fixed;
}
</style>
<script>
window.onload=function(){
var a = document.getElementById("a");
var Height=document.documentElement.clientHeight;//取得瀏覽器頁面可視區域的寬度
var Width=document.documentElement.clientWidth;//取得瀏覽器頁面可視區域的寬度
var gao1 = a.offsetHeight;
var gao2 = a.offsetWidth;
var Sgao1= (Height - gao1)/2+"px";
var Sgao2= (Width - gao2)/2+"px";
a.style.top=Sgao1;
a.style.left=Sgao2;
}
</script>
</head>
<body>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<div id="a">
sdvcdvf
</div>
</body>
</html>
效果：htm
相關文章
- 1. 使div或圖標一直固定在屏幕的某個位置
- 2. 讓DIV一直固定在屏幕的某個位置示例代碼
- 3. 將一個div塊固定在頁面某個地方
- 4. 小div在大div中水平垂直居中（兩個div都固定寬高）
- 5. div隨屏幕滾動到一定高度後固定
- 6. android 設置全屏的兩種方法
- 7. 讓div固定在某個位置
- 8. div彈出窗口，窗口固定屏幕中間
- 9. ABAP的兩種OOALV實現方法第一種畫屏幕
- 10. 自定義在兩種屏幕尺寸中使用spinner
- 更多相關文章...
- • 屏幕分辨率 統計 - 瀏覽器信息
- • Redis哨兵（Sentinel）模式的配置方法及其在Java中的用法 - Redis教程
- • IntelliJ IDEA代碼格式化設置
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
