How to center div in css

Center a div css

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

Center with css

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Css align items vertical center

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Source: css-tricks.com

Center div horizontally and vertically

.parent {
  position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Source: codepen.io

How to center div 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
--}}

Source: stackoverflow.com

Center a div

.container{
	margin: 0 auto;
    display: flex;
    align-items: center;
}

Similar codes

0 vote209 views2 answers
Gray scale css
CSS
1 vote231 views1 answer
Rotate favicon css
CSS
1 vote238 views2 answers
How rotate infinity css
CSS
-1 vote219 views2 answers
Css clip-path
CSS
2 votes217 views3 answers
Css cursor delete
CSS
0 vote249 views2 answers
How to bring a text in middle center of a tile css in anchor tag inline elements
CSS
1 vote236 views1 answer
Html center video
CSS
10 votes253 views5 answers
Css hr thickness
CSS
0 vote236 views1 answer
Hiding button border when clicked
CSS
4 votes215 views2 answers
Css zebra
CSS