Div with set aspect ratio and vertically and horizontally centered content?

Question

I am trying to create a div with a width of 60% of its parent div, and a height that is 40% of its own width. The div must keep this aspect ratio.

The div should contain text (more than one line) that is both vertically and horizontally centered.

I cannot use JS for this, only HTML and CSS.

I have tried the top/bottom padding trick for creating a div with a given aspect ratio, which works, however I am not able to center the text vertically.

The following snippet example looks as desired, only without the fixed aspect ratio.

.container {
  width: 80%;
  background: grey;
}

.ratio {
  background: white;
  margin: 0px auto 0px auto;
  width: 60%;
  height: 300px; /* Should be 40% of width */
  
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.text {
  text-align: center;
}

<div class="container">
  <h2>
    Heading
  </h2>
  <div class="ratio">
    <div class="text">
      Lorem ipsum dolor sit amet, ea mel case eros lorem. In etiam aperiam consetetur vix, ex duis postulant intellegam eam, alienum officiis antiopam duo cu. Cum et dico hinc iudicabit, sonet senserit petentium ex cum, ex usu intellegam theophrastus.
    </div>
  </div>
  <p>
    Other content
  </p>
</div>

Possible duplicate of [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) — Selvam Elumalai, Dec 21 '18 at 10:10
Can't see how, as the question you linked to does not require a div with a set aspect ratio without knowing the size in pixels. — mse, Dec 21 '18 at 10:18
use the padding trick and make the text to center position:absolute so it won't get affected by the padding — Temani Afif, Dec 21 '18 at 10:33
Could you provide a working example @TemaniAfif? I tried something like that, but experienced that only the first line is vertically centered, not the text block as a whole. — mse, Dec 21 '18 at 10:54

score 2 · Accepted Answer · answered Dec 21 '18 at 10:57

You can use the padding trick and then make the element out of the flow so it won't get affect by the padding:

.container {
  width: 80%;
  background: grey;
}

.ratio {
  background: white;
  margin: 0px auto 0px auto;
  width: 60%;
  padding-top:40%;
  position:relative;
}

.text {
  text-align: center;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

<div class="container">
  <h2>
    Heading
  </h2>
  <div class="ratio">
    <div class="text">
      Lorem ipsum dolor sit amet, ea mel case eros lorem. In etiam aperiam consetetur vix, ex duis postulant intellegam eam, alienum officiis antiopam duo cu. Cum et dico hinc iudicabit, sonet senserit petentium ex cum, ex usu intellegam theophrastus.
    </div>
  </div>
  <p>
    Other content
  </p>
</div>

Thank you so much, this combination with `transform: translateY(-50%)` really did the trick! — mse, Dec 21 '18 at 11:01

score 0 · Answer 2 · answered Dec 21 '18 at 10:10

0

You can use javascript/jQuery to set that specific height:

$('.ratio').height($('.ratio').width()*.4);

answered Dec 21 '18 at 10:10

Mirza Mašić

119
1
6

Thank you, but I cannot use anything else than CSS and HTML to solve this particular problem. Will update my question to clarify this. – mse Dec 21 '18 at 10:11
In that case you can use viewport-width (vw). It is % of viewport, independent of parent's width. So, if your container needs to be 60% of screen's width, you'll setg its width to 60vw, but also, you can use the same 'measure' for height - for example, 40vw (its height will be 40% of screen's width). Anyhow, ratio will be fixed. Try experimenting with that, it may fix your 'problem'. – Mirza Mašić Dec 21 '18 at 10:17
That does not work either, as it has to be 60% of parent divs with, not 60% of the viewport width.. – mse Dec 21 '18 at 10:20

Div with set aspect ratio and vertically and horizontally centered content?

2 Answers2