位置絶対がブロックを中心にしていません

Question

私のブロックをページの中央にしたいのですが、position: absoluteを設定した後、margin-leftとmargin-right、autoは機能しません。

.block1 { 
    position:absolute; 
    bottom:0; 
    height: 336px; 
    width: 1020px; 
    margin-left: auto; 
    margin-right: auto; 
} 

position：absoluteを指定して同時にブロックを中央に配置できますか？

Answer 1

固定幅がある場合は、left: 50%とmargin-left: -halfWidthを使用してください。

.parent-block { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 100%; 
 
    border: blue dotted 1px; 
 
} 
 

 
.block1 { 
 
    position:absolute; 
 
    bottom:0; 
 
    left: 50%; 
 
    height: 100px; 
 
    width: 150px; 
 
    margin-left: -75px; 
 
    background: red; 
 
}

<div class="parent-block"> 
 
    <div class="block1"></div> 
 
</div>

Answer 2

あなたは正しい軌道に乗っています。

.block1 { 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    height: 336px; 
    width: 1020px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 3

古典的な方法：：ちょうどそのように0にこのdiv要素にleftとrightを設定

.block1 { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 336px; 
 
    width: 500px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    background: purple; 
 
}

<div class="block1"><div>