Почему карточка моего профиля не в центре страницы?

Question

Я пытался центрировать карточку своего профиля, но не могу доставить ее в чертов центр. Как я могу центрировать эту карточку так, чтобы она находилась посередине страницы? Я пробовал margin-left:auto и margin-right:auto, и они должны работать, поэтому я не уверен, почему они не работают.

смешать. html

   {% extends "dating_app/base.html" %}


{% block styles %}

body{
    font-family: 'Open Sans', sans-serif;
}
*:hover{
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
section{
    float:left;
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:30px 0;
}
h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
h1 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
h1 a{color:#131313; font-weight:bold;}

/*Profile Card 5*/

.profile-card-5{
    display:block;
    margin-left:auto;
    margin-right:auto;



}
.profile-card-5 .btn{
    border-radius:2px;
    text-transform:uppercase;
    font-size:12px;
    padding:7px 20px;
}
.profile-card-5 .card-img-block {
    width: 91%;
    margin: 0 auto;
    position: relative;
    top: -20px;

}
.profile-card-5 .card-img-block img{
    border-radius:5px;
    box-shadow:0 0 10px rgba(0,0,0,0.63);
}
.profile-card-5 h5{
    color:#4E5E30;
    font-weight:600;
}
.profile-card-5 p{
    font-size:14px;
    font-weight:300;
}
.profile-card-5 .btn-primary{
    background-color:#4E5E30;
    border-color:#4E5E30;
}


{% endblock %}


{% block content %}

<section>
    <div class="col-md-3 mt-3">
                <div class="card profile-card-5">
                    <div class="card-img-block">
                        <img class="card-img-top" src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c" alt="Card image cap">
                    </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">Florence Garza</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
                <p class="mt-3 w-100 float-left text-center"><strong>Card with Floting Picture</strong></p>
            </div>

        </div>
    </div>
</section>

<br/>

Answer 1

Из класса col-md-3 видно, что вы используете фреймворк Bootstrap.

Bootstrap делит страницу на 12 столбцов , ваша оболочка карты имеет класс col-md-3, что означает, что ее ширина равна 3 из этих 12 столбцов. Если вы проверите свою страницу, вы увидите рассчитанный стиль:

@media (min-width: 768px) {
 .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
 }
}

Вы добавили margin-left:auto; и margin-right:auto; к внутреннему <div>, это не работает. Вы должны добавить их в <div> с классом .col-md-3.

body{
    font-family: 'Open Sans', sans-serif;
}
*:hover{
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
section{
    float:left;
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:30px 0;
}
h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
h1 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
h1 a{color:#131313; font-weight:bold;}
 .col-md-3 { margin:0 auto;}
/*Profile Card 5*/
.profile-card-5{
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.profile-card-5 .btn{
    border-radius:2px;
    text-transform:uppercase;
    font-size:12px;
    padding:7px 20px;
}
.profile-card-5 .card-img-block {
    width: 91%;
    margin: 0 auto;
    position: relative;
    top: -20px;

}
.profile-card-5 .card-img-block img{
    border-radius:5px;
    box-shadow:0 0 10px rgba(0,0,0,0.63);
}
.profile-card-5 h5{
    color:#4E5E30;
    font-weight:600;
}
.profile-card-5 p{
    font-size:14px;
    font-weight:300;
}
.profile-card-5 .btn-primary{
    background-color:#4E5E30;
    border-color:#4E5E30;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section>
    <div class="col-md-3 mt-3">
                <div class="card profile-card-5">
                    <div class="card-img-block">
                        <img class="card-img-top" src="https://images.unsplash.com/photo-1517832207067-4db24a2ae47c" alt="Card image cap">
                    </div>
                    <div class="card-body pt-0">
                    <h5 class="card-title">Florence Garza</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
                <p class="mt-3 w-100 float-left text-center"><strong>Card with Floting Picture</strong></p>
            </div>

        </div>
    </div>
</section>

Вот еще ссылка на живую Codepen .

EDIT

Я добавил в ваш код:

.col-md-3 {
    margin-left: auto;
    margin-right: auto;
}

Я посоветую добавить еще один класс, вместо этого вы применяете стиль непосредственно к .col-md-3.

Answer 2

попробуйте что-нибудь вроде

section{
display: grid;
}

section > div {
justify-self: center;
}