想請問一下如何讓p水平垂直置中? 就是不管中間的p大小 他能隨著瀏覽器大小自動置中對齊???
人生最曼妙的风景,竟是内心的淡定与从容!
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:
p { display: flex; flex-flow: row wrap; width: 408px; align-items: center; justify-content: center; }
css3 method can use flex to add
.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%);
}
Each writing method will make some small changes based on your layout.
Commonly used margin level methods:
1/2 width and height margin, 50% left and top method:
Method for LTRB value 0:
transform method
With text elements, let line-height = height:
The flex box layout is centered, add:
to the parent elementcss3 method can use flex to add
to the parentThe parent element is set to relative positioning, this element is set to absolute positioning, and then it is vertically centered through top and translateY
margin:auto
http://web.jobbole.com/83384/
p outside{
}
p in the middle{
}