Align div horizontally and vertically center to a page with responsive - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Align div horizontally and vertically center to a page with responsive

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.float {
   width:201px;
   height:151px;
   background:yellow;
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   margin:auto;
}
</style> <!--  w ww  .  j  a va  2  s.  co m-->
 </head> 
 <body> 
  <div class="content"> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tortor quis fringilla gravida. Ut ullamcorper ligula vel erat finibus congue. Mauris vitae vehicula sem. Nulla suscipit dui efficitur dolor fermentum rhoncus. Sed consequat eget felis tincidunt scelerisque. Sed in neque dolor. Nunc ornare, neque nec fermentum commodo, ante diam luctus purus, eu ullamcorper eros neque vitae enim. Proin egestas a arcu nec malesuada. Vivamus malesuada, nulla eleifend vulputate pretium, metus leo fermentum turpis, et sagittis enim leo et nisi. Donec sit amet facilisis sem.</p> 
   <p>Etiam sit amet dui leo. Suspendisse pellentesque elit at ante facilisis ultricies. Phasellus orci justo, condimentum ultrices magna id, imperdiet efficitur odio. Ut pellentesque ac elit nec volutpat. Nunc quis congue lectus. Nunc faucibus pulvinar risus ac vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras suscipit justo ac consectetur imperdiet. Cras interdum eros a libero imperdiet, vel facilisis metus pellentesque. Curabitur porta porttitor massa a dapibus. Nulla facilisi.</p> 
   <div class="float">
     Floating box 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials