css3 - div 水平垂直置中

Question

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

Answer 1

每種寫法都會根據你的版面進行一些小變化。
常用margin水平法：

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

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

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

LTRB值為0的方法：

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

transform方法

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

帶文字元素的話，讓line-height = height：

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

flex彈性盒子佈局居中,給父元素添加：

p {
    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

雷雷

Answer 4

父元素設定為relative定位，本元素設定為絕對定位，然後透過top和translateY使其垂直居中

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

Answer 5

邊距：自動

Answer 6

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

Answer 7

外面的p{

position: relative;

}
中間的p{

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

}