Thursday, September 29, 2016

CSS - Centering element

Hello,

Here is CSS using for centering element


 <html>  
 <head>  
 <style>  
   /*display table cell*/  
  .container1{  
  width: 200px;  
  height: 200px;  
  border : 1px solid red;  
  display : table-cell;  
  vertical-align: middle;  
  }  
  .content1{  
  border:1px solid blue;  
  }  
  /*CSS3 with transform*/  
  .container2{  
  margin-top:50px;  
  width: 200px;  
  height: 200px;  
  border : 1px solid red;  
  position:relative;  
  }  
  .content2{  
  border:1px solid blue;  
  position: absolute;  
  top: 50%;  
  transform: translate(0, -50%);  
  }  
  /*CSS3 with transform*/  
  .container3{  
  margin-top:50px;  
  width: 200px;  
  height: 200px;  
  border : 1px solid red;  
  display: flex;  
  align-items: center;  
  }  
  .content3{  
  border:1px solid blue;  
  }  
 </style>  
 </head>  
 <body>  
  <h2>  
 Centering vertical with table style:</h2>  
 <div class="container1">  
  <div class="content1">  
   1. This small paragraph is vertically centered.<br />  
  </div>  
 </div>  
 <h2>  
 Centering vertical CSS3 :</h2>  
 <div class="container2">  
  <div class="content2">  
   2. This small paragraph is vertically centered.<br />  
  </div>  
 </div>  
 <h2>  
 Centering vertical using Flex :</h2>  
 <div class="container3">  
  <div class="content3">  
   3. This small paragraph is vertically centered.<br />  
  </div>  
 </div>  
 </body>  
 </html>  
You can find the live demo here Plunker