Позиция Absolute не является центральным блоком

Question

Я хочу, чтобы мой блок находился в центре страницы, но после того, как я установил position: absolute, margin-left и margin-right, auto не работает.

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

Возможно ли иметь положение: абсолютное и центрировать блок одновременно?

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

Вы находитесь на правильном пути. Просто установите left и right по этим делам до 0, так как:

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

Answer 3

классического способ:

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

<div class="block1"><div>