css3 - div 水平垂直置中
黄舟
黄舟 2017-04-17 11:48:46
0
7
619

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

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

reply all(7)
刘奇

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;
} 
PHPzhong

css3 method can use flex to add

to the parent
.father {
    display: flex;
    justify-content: center;
    align-items: center;
}
迷茫
p {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
巴扎黑

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%);
巴扎黑

margin:auto

洪涛

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

巴扎黑

p outside{

position: relative;

}
p in the middle{

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

}

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template