css3 - div 水平垂直置中

Question

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

Answer 1

Each writing method will make some small changes based on your layout.
Commonly used margin level methods:

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

1/2 width and height margin, 50% left and top method:

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

Method for LTRB value 0:

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

transform method

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

With text elements, let line-height = height:

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

The flex box layout is centered, add:

to the parent element

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

Answer 2

css3 method can use flex to add

to the parent

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

Answer 3

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

Answer 4

The parent element is set to relative positioning, this element is set to absolute positioning, and then it is vertically centered through top and translateY

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

Answer 5

margin:auto

Answer 6

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

Answer 7

p outside{

position: relative;

}
p in the middle{

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

}