When the size of the div with absolute position is unknown, the simplest solution is using translate function. Obviously, the container is not static.
.absolute1 { position:absolute; background-color: antiquewhite; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Element with absolute position and unknown size
Element with absolute position and unknown size
Element with absolute position and unknown size
By the way, many authors suggest a solution that works only for divs with height and width set:
.absolute2{ position:absolute; background-color: antiquewhite; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width:50%; height:30%; }
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Relative Container, Relative Container, Relative Container, Relative Container, Relative Container
Element with absolute position and known size
Element with absolute position and known size
Element with absolute position and known size
No comments:
Post a Comment