how to center a div in css
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}how to center a div in css
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}center a div
.container{
margin: 0 auto;
display: flex;
align-items: center;
}how to center divs in css
{{-- this is my code
there is two ways to do it
the first method using flex box
--}}
<html>
<body>
<style>
.center {
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div>
<h1 class="center">title</h1>
<h4 class="center">body</h4>
<div class="center">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" height="400px" width="400px" >
</div>
</div>
</body>
</html>
{{--
but the problem with this method that you need to give each element the center class
and in the case of some elments such as an image you need to wrap it inside a div
and pass the center class to it
--}}
{{-- the other way is using css grid --}}
<style>
.center {
display: grid;
place-items: center;
}
</style>
<div class="center">
<h1 >title</h1>
<h4>body</h4>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" height="400px" width="400px" >
</div>
{{--
the cool thing about this method that you just need to pass the center class,
in the parent div and evreything inside this div will be centered
and for example you dont need to put the image elemnt in a div in order for it to work
--}}how to center a div
It's normal to not know how to center a div, just copy and learn from the codes belowCopyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
