Monday, August 12, 2019

How to center Vertical and Horizontal div in css

Hello to you today I will introduce a Example Css that we frequently encounter when designing websites that center vertical and horizontal in css, this is very simple but if you do not know they can do follow the steps below.

Step 1. Create a div parent css

.content{
    width: 500px;
height: 400px;
background: yellow;
   }

Step 2. Add class content in html

 <div class ="content"></div>

Step 3. Create a class div child css

.center{
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   }

Step 4. Add class center in html

 <img class="center"src="url or icon of you" width="50px" height="50px"/>  
After all source center vertical and horizontal in css below:
 <html>
 <head>
  <title>Center Vertical and Horizontal in CSS</title>
  <style>
   .content{
    width: 500px;
height: 400px;
background: yellow;
   }
   .center{
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   }
  </style>
 </head>
 <body>
  <div class ="content">
   <img class="center"src="https://icon-library.net/images/hamburger-menu-icon-png-white/hamburger-menu-icon-png-white-15.jpg" width="50px" height="50px"/>
  </div>
 </body>
</html>
source image center div:
How to center Vertical and Horizontal div in css

No comments:

Post a Comment