div 水平垂直置中

Question

想請問一下如何讓div水平垂直置中?
就是不管中間的div大小 他能隨著瀏覽器大小自動置中對齊???

Answer 1

每种写法都会根据你的布局进行一些小小变化。
常用margin水平方法：

div { 
    width:200px;
    margin:0 auto;
}

1/2宽高的margin，50%的left、top方法：

div {        
    Width:500px ; 
    height:300px;      
    Margin: -150px 0 0 -250px;        
    position:relative;       
    background-color:pink;      
    left:50%;
    top:50%;     
}

LTRB值为0的方法：

div { 
    width: 400px;
    height: 300px; 
    margin:auto;
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
}

transform方法

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

带文本元素的话，让line-height = height：

p {
    height:30px;
    line-height:30px;
    text-align:center;
}

flex弹性盒子布局居中,给父元素添加：

div {
    display: flex;
    flex-flow: row wrap;
    width: 408px; 
    align-items: center; 
    justify-content: center;
} 

Answer 2

css3方法可以用flex，给父级添加

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 3

div {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

Answer 4

父元素设置为relative定位，本元素设置为绝对定位，然后通过top和translateY使其垂直居中

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

Answer 5

margin:auto

Answer 6

http://web.jobbole.com/83384/

Answer 7

外面的div{

position: relative;

}
中间的div{

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}