The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Vertical and horizontal centered
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?
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
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
Thank you!