display:table

#2 Возможности выравнивания с применением display:table etc на трёх div

by roskoshinsky

HTML

<div class="object1" >
    <div class="object2" >
        <div class="object3" >
            <div class="object4" >
                <div class="object5" >
<p>Lorem<!-- ipsum dolor sit amet, consectetur adipiscing elit. Ut ipsum velit, sagittis at lacinia sit amet, interdum in libero. Suspendisse vel eros porta, tempus nulla at, lacinia nunc. Nullam vulputate ipsum risus, vitae tincidunt urna ornare elementum. Donec et iaculis dolor. Etiam ligula diam, lobortis eget rutrum sed, feugiat a metus. Maecenas semper nisl id turpis varius tristique. Aenean augue arcu, interdum pharetra sodales in, faucibus sit amet diam. Vestibulum magna neque, gravida ut rutrum sit amet, blandit posuere lectus. Etiam a consectetur nisl, vitae sollicitudin ante. Pellentesque rutrum sollicitudin nunc a lobortis. In non lobortis urna. Nullam sed elit ornare, sodales arcu nec, sagittis erat. Nulla mauris dolor, tristique eu massa eu, egestas tincidunt odio. Donec eu nisl molestie, rhoncus lorem eget, eleifend leo. Aliquam risus nibh, laoreet eu velit quis, aliquam dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu turpis aliquet, molestie elit id, iaculis est. Aliquam ut augue eget ante dapibus egestas nec eget justo. Cras dui justo, aliquet vitae ante id, pharetra pulvinar metus. Nullam pulvinar laoreet elit, ac pellentesque leo tincidunt ac. Sed fermentum sem eget metus condimentum, id congue libero tristique. Donec nisl ante, hendrerit at tempus nec, adipiscing ac leo. Sed quis iaculis tortor. Cras a turpis id lacus lacinia sollicitudin non in lacus.</p>Sed varius quis orci et venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vulputate laoreet vestibulum. Aliquam fermentum semper pretium. Phasellus tristique neque ac lectus laoreet, quis sagittis velit condimentum. Morbi eu fringilla mauris, sit amet ultrices...

CSS

.object1 {width: 400px; height: 300px; border: 1px solid red; background-color: yellow; }

.object2 {display: table; width: 100%; height: 100%; border: 1px solid gray;}

.object3 {display: table-row; width: 100%; height: 100%; border: 1px dotted navy;}

.object4 {display: table-cell; vertical-align: middle; text-align: center; border: 1px dashed blue;}

.object5 {position: relative; width: 100%; height: 100; overflow: auto; background-color: black; color: white; vertical-align: middle; text-align: center; border: 1px dashed blue;}