CSS的水平與垂直置中

整理一些CSS置中的方式(其實網路上有很多了XD)
這邊的內容參考此網址 https://css-tricks.com/centering-css-complete-guide/

先分成兩個部分：水平置中、垂直置中

一、水平置中

1. inline element: 

    在父元素(block element)加上text-align: center;

2. block element

    在此block element加上margin: 0 auto;

    要注意的是此block element必須要有width

3. 多個block element

    a. 可以改變為display: inline-block，並在父元素使用text-align: center;

    b. 父元素使用flexbox。display: flex; justify-content: center;

二、垂直置中

1. inline element

1-1. 單行

    a. 在此元素設定padding-top與padding-bottom為相同數值

    b. 父元素設定line-height與height相同數值

1-2. 多行

    a. 父元素display: table，子元素display: table-cell並vertical-align: middle;

    或是在HTML的tag裡使用table與tr, td

    b. 父元素使用flexbox。display: flex;  flex-direction: column;  justify-content: center;

    c. 使用偽元素。如下所示：

.ghost-center {

  position: relative; 

}

.ghost-center::before { 

  content: " "; 

  display: inline-block; 

  height: 100%; 

  width: 1%; 

  vertical-align: middle; 

} 

.ghost-center p { 

  display: inline-block; 

  vertical-align: middle; 

}

    增加一個不會顯示出來的inline-block，高度與容器相同，讓要置中的元素與它對齊

2. block element

2-1. block element有固定height

父元素position: relative; 子元素position: absolute; top: 50%; margin-top: -50px;

2-2 block element沒有固定height

父元素position: relative; 子元素position: absolute; top: 50%; transform: translateY(-50%);

2-3 使用flexbox

父元素 display: flex; flex-direction: column; justify-content: center;

使用純javascript發出HTTP method POST

在網路上搜尋資料，大部分實現AJAX(以POST為例)的範例大概都是

1. 使用jQuery的AJAX功能

2. 使用form，並且方法使用POST

如：<form action="http://foo.com" method="post">


而現在想要達成的功能是

1. 發出POST request，且URL不改變

2. 不使用其他Library

這時候就不能使用form的action了

瀏覽器會幫你把頁面跳轉，此時URL就會改變了

後來在 http://youmightnotneedjquery.com/ 找到我想要的寫法
var request = new XMLHttpRequest();
request.open('POST', '/newindex', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
    console.log(resp);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

而我的server side是使用node.js + express

var express = require('express');

var app = express();

app.use(express.static(__dirname + '/public'));
app.post('/newindex', function(req, res){
  console.log("req received!");
  res.send('This is POST METHOD');
})

app.listen(8888);

使用node.js發出post

使用node.js發出post請求其實是個不太常見的用法，

因為一般用法，是使用網頁表單發出post請求向server請求資料

而使用node.js的server再去處理request

不過，總是會遇到需要使用node.js發出request的情況嘛~

首先，先使用request這個套件，網址如下

https://www.npmjs.com/package/request

官網的範例程式(少了一個分號)長這樣

var request = require('request');
request('http://www.google.com', function (error, response, body) {
    if (!error && response.statusCode == 200) {
        console.log(body) // Show the HTML for the Google homepage.
    }
});


不過我使用時，抓回來的response有中文 為了顯示上的好看，

我使用了adobe與google開發的思源黑體 

 https://www.google.com/get/noto/ 

 在這邊選擇Noto Sans CJK TC，

是Chinese Japanese Korean Traditonal Chinese的縮寫

安裝好之後，編輯.atom/styles.less

font-family: Noto Sans CJK TC; 

 font-size:16px;

但是這邊連英文與數字都會套用成思源黑體，覺得好醜，因此改成

font-family: Consolas, 'Courier New', Courier, Noto Sans CJK TC; font-size:16px;

前面的字型是atom的預設字型(atom會隨著你安裝的OS不同改變預設字型)

若是想要更進階應用的話，可以參考@font-face之unicode-range


接下來進入正題啦，直接來看程式碼

request.post({

                      url:'這裡是你的URL', 

                      qs: '包含querystring的物件',
                      encoding: null}, 

                      function (error, response, body) { 

                          if (!error && response.statusCode == 200) {

                              console.log(body); 

                          }); 

                      } 

});


執行後出現亂碼啦

原因就出在編碼的問題上

因此去下載iconv-lite

https://www.npmjs.com/package/iconv-lite

並把程式碼修改成

var str = iconv.decode(new Buffer(body), "big5");
console.log(str);

就大功告成啦