How to center one div under another, exceeding the limit of the first?

Asked

Viewed 164 times

3

Hello, I’m learning about CSS3 and I’m trying to center one div underneath the other so it’s more or less like this:

inserir a descrição da imagem aqui

Yet mine has remained so: inserir a descrição da imagem aqui

I tried using margin-bottom: -150px It didn’t work. And I also have doubts about whether I force on pixel not to break into different layouts.

My code is this:

<body>
  <div class="aaa">
    <div class="bbb">
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
    </div>
  </div>
</body>

<style>
  body {
    background: black;
  }

  .aaa {
    height: 500px;
    border: 1px solid black;
    background: #c72523;
    position: relative;
  }

  .bbb {
    position: absolute;
    margin: auto;
    width: 70%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: auto;
  }

  .a {
    width: 200px;
    height: 300px; 
    border: 1px solid black;
    background: red;
    transition: all 200ms ease-in-out;
  }

  .a:hover {
    transform: scale(1.5);
  }
</style>
html css css3

1 answer

2


Here is an option, as you are using position absolut in div of links, use bottom and left and then transform:translate to center in the base as you want. To better understand see the code below.

Show in full page to see better the result

body {
  background: black;
}

.aaa {
  height: 500px;
  border: 1px solid black;
  background: #c72523;
  position: relative;
}

.bbb {
  position: absolute;
  margin: auto;
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: auto;

  bottom:0;
  left:50%;
  transform: translate(-50%, 50%);
}

.a {
  width: 200px;
  height: 300px; 
  border: 1px solid black;
  background: red;
  transition: all 200ms ease-in-out;
}

.a:hover {
  transform: scale(1.5);
}
<div class="aaa">
    <div class="bbb">
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
    </div>
</div>

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.