2018年5月11日 星期五

CSS 上下左右全置中

CSS 上下左右全置中
2021 ==== 更新
使用flex 可以更快處理上下左右全置中
ex:
html,body{
 padding:0;
 margin: 0;
 width: 100%;
 height: 100%;
}

//粉紅色大底
.parents{  
width: 100%;
height: 100%;
background:pink;
display: flex;
}

//要置中的藍色區塊
.child{
margin: auto;
width: 500px;
height: 500px;
background: blue;
}

結果如下












 ==CSS2通用版=============
.box{
width:220px;

height:200px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

==CSS3加強版=============
.box{
width:220px;
height:200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
若要製作lighBox效果的填入畫面

若要淡黑背景中間的區塊一直保持在畫面中,如下方html
<div id='wrapper'> <-- 淡黑背景
   <div id='content'> <-- 要置中的內容
        <form> .... </form>
   </div>
</div>

若內容高於視窗高度時,在滾動滑鼠捲軸時會產生
置中的內容跟著往上跑或不會出現在畫面中央的問題
這時候可把 content 的position設為fixed即可,
不管滑鼠如何滾動 該區塊都會保持在畫面中央