Align my css div section in center - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div

Description

Align my css div section in center

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor </title> 
  <style>
.container-1 {<!--from ww  w .j a  va  2  s.  c  o m-->
   background-color:Chartreuse;
   display:block;
   padding:2rem;
}

.centered-element-1 {
   background-color:yellow;
   margin:auto;
   width:501px;
   padding:2rem;
}

.container-2 {
   background-color:blue;
   padding:2rem;
   margin-top:4rem;
   display:flex;
   align-items:center;
   justify-content:center;
}

.centered-element-2 {
   background-color:pink;
   padding:2rem;
}

.container-3 {
   background-color:OrangeRed;
   padding:2rem;
   margin-top:4rem;
   display:block;
   position:relative;
   height:100px;
   width:auto;
}

.centered-element-3 {
   display:block;
   background-color:grey;
   position:absolute;
   top:-10000px;
   left:-10000px;
   right:-10000px;
   bottom:-10000px;
   margin:auto;
   width:100px;
   height:171px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="container-1"> 
   <div class="centered-element-1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliq 
   </div> 
  </div> 
  <div class="container-2"> 
   <div class="centered-element-2">
     Lorem ipsum dolor sit am 
   </div> 
  </div> 
  <div class="container-3"> 
   <div class="centered-element-3">
     Lorem ipsum dolor sit amet, consecte 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials