實現div的水平居中定位

Question

我想把一個div定位在螢幕的中心。問題是當div很小的時候，從左邊45%看起來還不錯，但是當div更長（即寬度更大）時，我需要將其從左邊改為30%。

有沒有智慧的方法可以依照div的大小來定位div在中心位置。

body {
background:blue;
}

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

<div class="box">
這是一個很長的div，所以需要left = 30%
</div>

Answer 1

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

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

Answer 2

您可以使用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 class="box">
这是一个很长的div，所以需要左边=30％
</div>