css使用flexbox處理垂直居中的版面

使用flexbox處理垂直居中，最快速簡便的模式只要在上層使用display:flex，要置中的子項目加上margin:auto即可

css部分

html,body{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
}
.wrapper{
	width:100%;
	height:100%;
	display: flex; // 在上層使用flex
	background: pink;
}

.child{
	width: 300px;
	height: 300px;
	background: blue;
	margin: auto; // 要置中的子項目樣式加上margin:auto即可
	display: flex; // 在上層使用flex
}

.child p{
	color: #fff;
	margin: auto; // 要置中的子項目樣式加上margin:auto即可
}

html部分

<div class="wrapper">
	<div class="child">
		<p>上下左右置中的內容</p>
	</div>
</div>

呈現的結果

解決新版google chrome 影片或聲音無法自動播放的問題 (Fix google chrome Autoplay policy)

google chrome在76版後把chrome://flags內的autoplay policy移除了
這樣對做單機版或是需要特定網址能執行影片或聲音autoplay的開發者影響很大

經過一番搜尋研究，目前可解決的方式如下：

A.經由Chrome的設定

1. 開啟chrome的設定
   (chrome / setting)
2. 點擊左側的「進階」內的「隱私權和安全性」
   (Advanced / Privacy and Security )
3. 點擊右側視窗的「網站設定」內的「音訊」
   (Site Settings / Sound)
4. 開啟「允許網站播放音訊」的選項
   (Enable Allow Sites to Play Sound)
5. 新增允許自動播放的網址，如果檔案放在本機播放的話可輸入如下：
   localhost:8080  <-- 後面的port號視自己開放的port而定
   * 無法直接設定檔案位置 如：file://users/xxx/www/index.html 
   (Add the URL (localhost, etc) to the Allow area)
6. 關閉並重新啟動chrome，在網址列輸入localhost:8080 即可
   (Close and re-open chrome)

B.經由Command line加上參數執行chrome這一個方法，據說是google官方開發人員表明會保留的語法，那就是以command line的方式執行

MacOS :

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --autoplay-policy=no-user-gesture-required

Windows :
可以新增一個chrome的執行捷徑，在捷徑icon上點擊滑鼠右鍵選「內容」，在「目標」欄位內"C:\Program Files\Google\Chrome\Application\chrome.exe"的後方加上

--autoplay-policy=no-user-gesture-required

整句如下：(注意chrome.exe後方的空格)

"C:\Program Files\Google\Chrome\Application\chrome.exe" --autoplay-policy=no-user-gesture-required

或是撰寫一個.bat檔案把執行語法加上然後丟進windows的啟動資料夾，那麼開機後就會自動執行，bat上的語法如下

@echo off
start chrome.exe http://localhost:5438/ --kiosk --autoplay-policy=no-user-gesture-required