Hello to you today I will introduce a code css that we frequently encounter when designing websites that center vertical and horizontal in ...
August 12, 2019
Hello to you today I will introduce a code 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:
No comments
Post a Comment