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>source image center div:
<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>
No comments:
Post a Comment