實現div的水平居中定位

Question

我想把一個div定位在螢幕的中心。問題是當div很小的時候，從左邊45%看起來還不錯，但是當div更長（即寬度更大）時，我需要將其從左邊改為30%。有沒有一種智慧的方法可以根據div的大小來定位div在中心位置。 body{background:blue;}.box{position:absolute;top:10px;left:30%;background:white;padding:10px;b

P粉659518294 · Answer

你可以透過以下方式將其水平居中：

.box  {
   position: absolute;
   top:10px;
   left:50%;
   background:white;
   padding:10px;
   border-radius:10px;
   transform: translateX(-50%);
}

P粉752290033 · Answer

您可以使用display: flex;屬性將元件置中對齊。

css flex

#

body {
flex: 1;
background:blue;
display: flex;
justify-content: center;
}

.box  {
position: absolute;
top:10px;
background:white;
padding:10px;
border-radius:10px;
}


这是一个很长的div，所以需要左边=30％