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);