css：子項目div 上下左右置中方法總結

標籤：justify   其他   middle   方法總結   ica   tab   items   左右   元素   

最近在面試，不停地收到了知識衝擊，尤其是對於一些基礎的css、html、js問題居多，所以自我也在做反思，今天就css問題，如何讓一個子項目div塊元素上下左右置中 (以下總結方法，都已得到驗證)。

　　情景一：一個瀏覽器頁面中，只有一個div模組，讓其上下左右置中

　　　　　　解決方案：  { position:fixed;

　　　　　　　　　　　　  left:0;

　　　　　　　　　　　　　right:0;

　　　　　　　　　　　　　top:0;

　　　　　　　　　　　　　bottom:0;

　　　　　　　　　　　　　margin:auto; }

　　　　　　備忘：此處小編使用position:fixed為最佳方案，因為position：fixed定位是相對於整個瀏覽器頁面的。

　　情景二：一個父元素div，一個已知寬度、高度的子項目div(200*300)

　　　　　　解決方案： 1、position布局

　　　　　　　　　　　　　{

　　　　　　　　　　　　　　position:absolute/fixed;

　　　　　　　　　　　　　　top:50%;

　　　　　　　　　　　　　　left:50%;

　　　　　　　　　　　　　　margin-left:-100px;

　　　　　　　　　　　　　　margin-top:-150px;

　　　　　　　　　　　　　　}

　　情景三:一個父元素div，一個未知寬度、高度的子項目div

　　　　　　解決方案： 1、position布局，position設為absolute，其他同情景一

　　　　　　　　　　　 2、display：table

　　　　　　　　　　　　父級元素：{ display:table;} 

　　　　　　　　　　　　子級元素： { display:table-cell;vertical-align:middle }

　　　　　　　　　　　 3、flex布局

　　　　　　　　　　　　父級元素：{ display:flex;flex-direction:row;justify-content:center;align-items:center;} 

　　　　　　　　　　　　子級元素：{flex:1}

css：子項目div 上下左右置中方法總結