Centering a div

Question

I'm having a problem centering a div, I want that this div .card-group to be behind the "hello" message. Also want those 2 elements to be centered.

section {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.card-group,
.card {
  aspect-ratio: 8 / 10;
  width: 30vmin;
}

.card {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.05);
  position: absolute;
}

<section data-id="1" class="is-active">
  <div class="card-group">
    <div class="little-card card"></div>
    <div class="little-card card"></div>
    <div class="little-card card"></div>
    <div class="little-card card"></div>
  </div>
  <p>
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
  </p>

</section>

Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Heretic Monkey, Dec 23 '22 at 22:42

score 0 · Answer 1 · answered Dec 23 '22 at 22:07

Modifying position might work.

section{
    position:absolute;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
  
}
.card-group,
.card {
    aspect-ratio: 8 / 10;
    width: 30vmin;
}
 .card{
    display: flex;
flex-direction: row;
justify-content:center;
background-color: grey;
position: absolute;
   margin: 0 auto;
}

p{  position: absolute;

}

<section data-id="1" class="is-active"> 
            <div class="card-group">
                <div class="little-card card"></div>
                <div class="little-card card"></div>
                <div class="little-card card"></div>
                <div class="little-card card"></div>
                </div>
            <p>
                <span>H</span>
                <span>e</span>
                <span>l</span>
                <span>l</span>
                <span>o</span>
            </p> 
         
        </section>

score 0 · Answer 2 · answered Dec 23 '22 at 22:11

Is this what you want:

section{
    position:absolute;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    display: flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
}
.card-group,
.card {
    aspect-ratio: 8 / 10;
    width: 30vmin;
    border: 1px solid;
}
 .card{
    display: flex;
    flex-direction: row;
    justify-content:center;
    background-color: rgba(255,255,255,0.05);
    position: absolute;
}

p {
  position: absolute;
}

<section data-id="1" class="is-active"> 
            <div class="card-group">
                <div class="little-card card"></div>
                <div class="little-card card"></div>
                <div class="little-card card"></div>
                <div class="little-card card"></div>
                </div>
            <p>
                <span>H</span>
                <span>e</span>
                <span>l</span>
                <span>l</span>
                <span>o</span>
            </p> 
         
        </section>

Centering a div

2 Answers2