Pure CSS: centering vertically and horizontally an absolute positioned element with width depending on children

Question

So... I got this code: https://jsfiddle.net/jmg63s3e/1/

The code actually works fine if you resize the browser window until you have the text inline with the image and that's what I'm trying to achieve, but if you resize it down eventually the text drops below the image even if the wrapper width is a lot smaller than the window width.

My only purpose is to have:

the whole wrapper centered both vertically and horizontally in the browser window. Its total width and height unknown, depending on its children
row1 and row2 must not be inline: row2 must be below row1
All the elements inside row1 (the image and the text containing 2 spans) must be inline with each other
And well, the spinner inside row2 must also be centered inside the row but that was never a problem whatever solution I tried

As a matter of fact the only dynamic element in the whole code is the first span which in the example contains Player #1, since it should be the name of the player and it can be anything, any length.

Of course if I wanna make it responsive I will have to use media queries or dynamically change widths and heights and font-sizes with JS, and I'm willing to do so. My problem here is only the wrapper itself and the text that drops below the image even if the wrapper width is a lot smaller than the window width, so I'm asking for a solution that works as long as the wrapper width is smaller than the window width. When the wrapper width drops below the window width, I will handle the style with responsive media queries or JS. I would just like to have the wrapper to be centered both vertically and horizontally in the window, and its size to be dynamic and depending on children.

I've already tried any solution I could think of, but with an unknown wrapper width I just can't figure it out. Can someone help me please? I'm open to any suggestion and any solution, as long as it's pure CSS and it doesn't involve JS. Thanks everyone in advance

Please do not put links to code, put relevant sections in the question itself. — nuric, May 28 '18 at 18:32
maybe this is helping you https://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically — Karamellwuerfel, May 28 '18 at 18:33
@Philipp the question you linked is about a div with certain width and height, and of course it simply uses negative margins top and left with half width and height of the element. My question is about a dynamic wrapper with width and height depending on children — ErnieBob, May 28 '18 at 18:41

Adam Bohannon · Accepted Answer · 2018-05-29T00:40:07.723

You can use flexbox to fix these problems.

Here's an updated fiddle with old CSS commented out: https://jsfiddle.net/jmg63s3e/3/

First, to align the wrapper both horizontally and vertically you need to make the parent container a flex container with display: flex and use justify-content: center and align-items: center. You also need to set a height or else it will wrap to the height of the child and not give you the centering effect. I used the following. The height can be whatever you need it to be.

.trump-waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  overflow: hidden;
  height: 100vh;
}

Next, I used display: flex on the wrapper and flex-direction: column to make sure they are all lined up like we want them to be.

.trump-waiting .wrapper {
  display:flex;
  flex-direction:column;

To fix row1, again I used flexbox and removed the inline-block and the set height. You could set the height as long as you take care of resizing the font in the text divs, with media queries for instance. Otherwise, with an explicit height, the font at the size it's at now will break out of their containers. Without explicitly setting the height, the containers will adjust in size.

.trump-waiting .row1 {
  display: flex;
  flex-direction: row;
  /* display: inline-block; */
  /* height: 60px; */
  background-color: yellow;
}

I also added flex-shrink:0 to .image to keep it from shrinking on resize.

To keep Player #1 and 'is choosing the trump suit' inline, I also added display: flex and flex-direction: row to .row keep them on the same line.

Finally, to align the loader, I did the vertical/horizontal alignment trick used above, plus added some padding to the div to give it some space and removed the old css.

.trump-waiting .row2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 16px 0;
  /* display: block; */
  /* margin-top: 50px; */

The last step would be to use media queries to adjust the font-sizes on .text spans so the font doesn't expand their container on resize.

Many ways to skin a cat and I'm sure others will have different perhaps better solutions, but hope this helps. There's a great summary of flexbox here if you need it. I may have left out a change in this summary, but it should all be in the fiddle.

EDIT: Realized I made a mistake summarizing the css in the jsfiddle and also removed a redundant css property. Now updated.

Thank you very much! This is exactly what I was looking for. Of course I still need to take care of font-sizes but that was never the problem here. Thanks! — ErnieBob, May 28 '18 at 19:14

Pure CSS: centering vertically and horizontally an absolute positioned element with width depending on children

1 Answers1