Как выровнять блок или картинку по центру?

Question

[WoodyAndBuzz]

Не выравнивается блок с картинкой по центру. Как исправить ситуацию. Стандартные display: block; margin: 0 auto; не помогают. Возможно проблема в основных элементах.

<div class="costumer">
        <div class="costumer-content ">
            <div class="costumer-item container">
                <p class="welcome welcome-all">Get know About</p>
                <h2 class="service">WHAT COSTUMER SAY</h2>
                <div class="border"></div>
                <div><img class="level-1" src="image/level1.jpg" alt=""></div>
                <div><img class="level-2" src="image/level2.jpg" alt=""></div>
                <div><img class="level-3" src="image/level3.jpg" alt=""></div>
                <div><img class="author" src="image/author.png" alt=""></div>
                <div class="slider">
                    <div class="all-content slide showing">   
                        <p class="web-2 sourabh">Sourabh B.</p>
                        <p class="founder">Co Founder of Mew</p>
                        <p class="great">Great Team with great experience, i would reguler recommended to all that you will get better support by working with this awesome team and their expert members :)</p>                   
                    </div>
                    <div class="all-content slide">   
                        <p class="web-2 sourabh">Sourabh B.</p>
                        <p class="founder">Co Founder of Mew</p>
                        <p class="great">Great Team with great  expert members :)</p>                   
                    </div>
                    <div class="all-content slide">   
                        <p class="web-2 sourabh">Sourabh B.</p>
                        <p class="founder">Co Founder of Mew</p>
                        <p class="great">Great T you expert members :)</p>                   
                    </div>
                </div>
                <div class="alerts all-content">
                    <a class="previousText" href=""><img class="previous" src="image/next.png" alt=""> Previous</a>
                    <a class="nextText" href="">Next<img class="next" src="image/next.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>

.slider{
    position: relative;
}

.slide{
    position: absolute;
    opacity: 0;
}

.showing{
    z-index: 10;
    opacity: 1;
}

.costumer{
    padding-top: 16px;
}

.costumer-content{
    background: url(image/background.jpg);
    height: 756px;
    position: relative;
}

.level-1{
    padding-top: 178px;
    padding-left: 134px;
}

.level-2{
    position: absolute;
    margin-left: -818px;
    margin-top: 152px;
}

.level-3{
    position: absolute;
    z-index: 1;
    margin-left: -788px;
    margin-top: 131px;
}

.welcome-all{
    padding-top: 50px;
}

.author{
    position: absolute;
    z-index: 2;
    margin-top: 89px;
    margin-left: -473px;
}

.all-content{
    position: absolute;
    z-index: 3;
    margin-top: -294px;
}

.sourabh{
    padding-left: 504px;
    letter-spacing: 1px;
}

.founder{
    padding-left: 487px;
    font-size: 15px;
    color: #7c7c7c;
    font-weight: 500;
    padding-top: 4px;
}

.great{
    padding-top: 38px;
    margin-left: 274px;
    font-size: 18px;
    font-weight: 500;
    color: #7c7c7c;
    width: 571px;
    text-align: center; 
}

.alerts{
    padding-top: 267px;
    padding-left: 408px;
}

.previousText{
    color: #494949;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    padding-right: 44px;
}

.nextText{
    color: #494949;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.previous{
    padding-left: 10px;
    transform: rotate(180deg);
}

.next{
    padding-left:14px;
}

Comments

[Ankhena]

В вашем коде нет "Стандартные display: block; margin: 0 auto"

Если что, чтобы такое сочетание работало, должна быть указана ширина в явном виде или хотя бы что-то типа fit-content.

[WoodyAndBuzz]

Ankhena, Она есть просто здесь не добавил в общую поместил со звездочкой.

[Ankhena]

WoodyAndBuzz, в кого общую?
Просто сделайте песочницу с минимальным кодом иллюстрирующим проблему на codepen.io
Картинки можете заменить на любые подходящие по размеру из яндекс.картинок или использовать сервисы заглушек https://picsum.photos/

[WoodyAndBuzz]

https://codepen.io/EdWrightwesr/pen/ExoKdry

Сделал, только у меня картинки непрозрачные однотонные можно добавить opacity. Но это навряд ли поможет, так как рисунки должны налегать друг на друга.

[Ankhena]

WoodyAndBuzz, ну и где в вашем коде тот самый блок с margin auto и указанной шириной?

[Ankhena]

WoodyAndBuzz, ну или можете просто загуглить "css все способы центрирования"

[WoodyAndBuzz]

Да, вы правы. С марджином действительно работает. Спасибо.