Vertical and horizontal centered

[Ayala]

Hi,

I want to take the yellow div in center vertically and horizontally as well, related to the container.

The 50vh height is important for the container.

https://codepen.io/Ayalann/pen/mMZGKJ

(The floated element should stay where it is.)

Could you help me?

[Paulie_D]

There is only one way that I know off (excluding JS) which is to absolutely position the item to be centered.

Otherwise, the floated element will be taken into account when laying out the elements and affect the centering methods that might otherwise be used.

https://codepen.io/Paulie-D/pen/LjKMEJ

[Paulie_D]

You can sort of fake it with Flexbox if you know the size of the floated item by adding a pseudo-element but I wouldn’t recommend this:

https://codepen.io/Paulie-D/pen/zdVyBW

[Ayala]

Thank you!

[Author]

Posts