讓元素相對於父元素垂直水平居中的CSS
阿新 • • 發佈：2018-03-29
sla str gray posit osi 理解 idt div AD
垂直居中
position: relative; top: 50%; transform: translateY(-50%);
1、position: relative;
理解：relative是相對的意思，這裏是相對於父元素
2、top: 50%;
理解：高度是50%，指的是父無素的高度的50%。
3、transform: translateY(-50%);
理解：向上移動自身元素高度的50%。
水平居中
position: relative; left: 50%; transform: translateX(-50%);
下面是示例代碼：
<html> <head> </head> <body> <div style="height:500px; background-color:gray;"> <div style="position:relative; top:50%;left:50%; transform:translateY(-50%) translateX(-50%); background-color:blue; width:200px; height:100px;"> </div> </div> </body> </html>
讓元素相對於父元素垂直水平居中的CSS