第一種方法:
CSS代碼 :
.dv1{
height:200px;
width: 200px;
border:1px solid red;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
HTML代碼 :
<div></div>
第二種方法:
css代碼 :
.dv1{
height:200px;
width: 200px;
position: absolute;
}
html代碼 :
<div></div>
JS代碼 :
var a=document.querySelector('div')
//獲取瀏覽器可視區(qū)的高度
var height=document.documentElement.clientHeight;
// 獲取可視區(qū)域的寬度
var widht=document.documentElement.clientWidth;
//獲取div的高度
var gao=a.offsetHeight;
//獲取div的寬度
var kuan=a.offsetWidth;
//設(shè)置上下距離
var sgao=(height-gao)/2+'px'
//設(shè)置左右距離
var sgoo2=(widht-kuan)/2+'px'
a.style.top=sgao
a.style.left=sgoo2
第三種方法 :
HTML代碼 :
<div></div>
CSS代碼 :
dv1{
height:200px;
width: 200px;
border:1px solid red;
position: absolute;
text-align: center;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
優(yōu)點(diǎn) :
良好的跨瀏覽器特性堕澄，兼容IE6-IE7碌冶。
代碼量少纵竖。
缺點(diǎn) :
不能自適應(yīng)。不支持百分比尺寸和min-/max-屬性設(shè)置生蚁。
內(nèi)容可能溢出容器奋单。
邊距大小與padding,和是否定義box-sizing: border-box有關(guān)，計(jì)算需要根據(jù)不同情況
第四種方法 :
HTML代碼 :
<div></div>
CSS代碼 :
div {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
優(yōu)點(diǎn)：
內(nèi)容可變高度
代碼量少
缺點(diǎn)：
IE8不支持屬性需要寫(xiě)瀏覽器廠(chǎng)商前綴可能干擾其他transform效果某些情形下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象
