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效果的填入畫面

參考：http://yuci119.blogspot.tw/2017/11/css-100.html

若要淡黑背景中間的區塊一直保持在畫面中，如下方html

<div id='wrapper'> <-- 淡黑背景
   <div id='content'> <-- 要置中的內容

        <form> .... </form>

   </div>

</div>

若內容高於視窗高度時，在滾動滑鼠捲軸時會產生

置中的內容跟著往上跑或不會出現在畫面中央的問題

這時候可把 content 的position設為fixed即可，

不管滑鼠如何滾動 該區塊都會保持在畫面中央

ajax post 資料不使用form格式，直接用id或class讀取input的vlaue值post

 html的部分                   

<input type="radio" name"data1" value="1">
<input type="text" name"data2" value="data2的資料">
<textarea rows="10" cols="80" name="data3" ></textarea>

 javascript的部分                   

function postData(){

 if(confirm('確定要新增此則資料?')){

  var dataValues={

   data1:$('input[name=data1]').val(),
   data2:$('input[name= data2]').val(),
   data3:$('textarea[name= data3]').val()

  }
   //也可以使用輸入欄位的id或classsName帶入資料
     $.ajax({
         url:'addData.php',
         type: 'POST',
         data: dataValues,
         async: false,
         success: function (msg) {
            alert(msg)  
         },
         cache: false
     });

     return false;

 }else{
     return false;
 }



}

 php的部分                   

然後addData.php頁面就可接收

$_POST['data1']

$_POST['data2']

$_POST['data3']

這三個值 

相關：ajax 使用form格式post 資料

safari新版(11.1或之前不知幾版之後)的問題，呼叫ajax時，type=file的input物件若為空，會顯示failed to load resource：要求逾時的錯誤

safari新版(11.1或之前不知幾版之後)的問題，

呼叫ajax時form data型態
若form內有type=file的input物件是空值時，
那麼submit之後，會顯示failed to load resource：要求逾時  的錯誤

在chrome上功能可正常運作 ，只有safari會顯示此錯誤

目前解決方式：
在送出ajax前，若form內的檔案上傳(input type=file)是空的，也就是沒有檔案需要上傳
那麼，就把這個input刪除

$("input[type=file]").each(function() {
    if($(this).val() === "") {
        $(this).remove();
    }
});