Alignment with relative and absolute positioning, make inner div centered - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

Alignment with relative and absolute positioning, make inner div centered

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">
#rel {<!--from ww w.  ja v  a  2s . c om-->
   position:relative;
   top:11px;
   left:21px;
   right:21px;
   width:401px;
   height:301px;
   border:2px solid Chartreuse;
   text-align:center;
   display:table-cell;
   vertical-align:middle;
}

#abs {
   display:block;
   bottom:16px;
   width:301px;
   height:201px;
   border:2px solid yellow;
   margin:0 auto;
}
</style> 
 </head> 
 <body> 
  <div id="rel"> 
   <span id="abs">Why I'm not centered ?</span> 
  </div>  
 </body>
</html>

Related Tutorials