元素div 上下左右居中方法總結

元素div 上下左右居中方法總結

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

　　　　　　解決方案：  { position:fixed;

　　　　　　　　　　　　  left:0;

　　　　　　　　　　　　　right:0;

　　　　　　　　　　　　　top:0;

　　　　　　　　　　　　　bottom:0;

　　　　　　　　　　　　　margin:auto; }

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

　　　　　　解決方案： 一、position佈局

　　　　　　　　　　　　　{

　　　　　　　　　　　　　　position:absolute/fixed;

　　　　　　　　　　　　　　top:50%;

　　　　　　　　　　　　　　left:50%;

　　　　　　　　　　　　　　margin-left:-100px;

　　　　　　　　　　　　　　margin-top:-150px;}

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

　　　　　　解決方案： 一、position佈局，position設爲absolute，其餘同情景一

　　　　　　　　　　　 二、display：table

　　　　　　　　　　　　父級元素：{ display:table;}

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

　　　　　　　　　　　 三、flex佈局

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

　　　　　　　　　　　　子級元素：{flex:1}

　　　　　　　　　　　四、translate

　　　　　　　　　　　　position: absolute;　　　　　　　　　　　　top: 50%;　　　　　　　　　　　　left: 50%;　　　　　　　　　　　　-webkit-transform: translate(-50%, -50%);　　　　　　　　　　　　-moz-transform: translate(-50%, -50%);　　　　　　　　　　　　-ms-transform: translate(-50%, -50%);　　　　　　　　　　　　-o-transform: translate(-50%, -50%);　　　　　　　　　　　　transform: translate(-50%, -50%);