I'm trying to center two divs one under the other, inside another div. But that's the best result I got, in a responsive way. result I got

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  background-color: lightgray;
  height: 100%;
  width: 80%;
  border-radius: 25px;
}

.cliente_info,
.cliente_table {
  display: inline-block;
}

.cliente_info {
  width: 90%;
  height: 45%;
  background-color: azure;
}

.cliente_table {
  width: 90%;
  height: 45%;
  background-color: rgb(156, 204, 204);
}

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

I would like to get the divs to look like the following image. Result expected

CodePudding user response：

Try adding flex-flow: column to the .content class and changing the inline-block elements to block

CodePudding user response：

In addition to adding flex-direction: column to the .content class, you can add justify-content: space-around to get space before, between, and after each associated element. If you do not wish to do so, padding top and bottom can be applied instead to the .content class.

CodePudding user response：

Here you can try this logic :

 .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 500px;
      height: 500px;
      background-color: lightgray;
    }

    /* Height => (2 * 45%) = 90%  =>45% for cliente_info & 45% for cliente_table */
    .cliente_info,
    .cliente_table {
      width: 90%;
      height: 45%;
    }

    .cliente_info {
      background-color: cyan;
    }
    .cliente_table {
      background-color: orange;
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div >
      <div ></div>
      <div ></div>
    </div>
  </body>
</html>

CodePudding user response：

There are many notes here:

Note 1:

By default, the flex element has a flex-direction of row, so to make his children stands in a column set the flex-direction to column

Note 2:

If you want to control some elements with their parent using flex or grid for example, try avoiding to use the display for the children, because in most of the cases, it will be ignored and the alignment will come from the parent settings.

So, delete the display: inline-block from the children.

Note 3:

You're setting all dimensions of the parent and children in percentage, which means that the grand parent of the parent element must have a width and height, in your case, the body so that the parent elements knows what value he took his percentage.

Or just set a width and height without percentages.

The Code After Edits:

body{
    width: 100vw; height: 100vh; margin: 0;
}

.content {
  height: 100%; width: 80%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  margin-left: 5px; border-radius: 25px;
  background-color: lightgray;
}

.cliente_info {
  width: 90%; height: 45%;
  background-color: azure;
}

.cliente_table {
  width: 90%; height: 45%;
  background-color: rgb(156, 204, 204);
}

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

Just note the lines: 1-3 and 7 in css, and the missing style of children display.

I think it's clear now, if anything is missing, just let me know.