Position element based on the centre of the screen horizontally with CSS - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

Position element based on the centre of the screen horizontally with CSS

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">
html, body {
   height:100%;
   overflow:hidden;
}

.one {<!--  w w w .ja  v  a2 s. c  o m-->
   display:block;
   width:51%;
   border-right:2px dotted Chartreuse;
   height:100%;
   position:absolute;
   z-index:1000;
}

#two {
   width:281px;
   height:100px;
   border:2px solid yellow;
   position:absolute;
   top:51%;
   left:51%;
   margin-top:-51px;
   margin-left:-221px;
}

#three {
   margin-left:51%;
   width:81px;
   height:100px;
   background-color:blue;
   opacity:0.3;
   line-height:100px;
   text-align:center;
}
</style> 
 </head> 
 <body> 
  <div class="one"></div> 
  <div id="two"> 
   <div class="one"></div> 
   <div id="three">
     Lorem 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials