How to center divs in css

Center a div css

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

Css center text

/* To center text, you need to use text-align. */

.centerText {
  text-align: center; /* This puts the text into the center of the 
  screen. */
}

/* There are also other things that you can use in text-align:
left, right, and justify. Left and right make the test align to the
right or left of the screen, while justify makes the text align both
sides by spreading out spaces between some words and squishing others. */

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
--}}

Source: stackoverflow.com

Center div css

.container {
  display: grid;
  place-items: center;
}

How to center div

<!--center text-->
<!--padding deals with margins within the element itself-->
<!--margin deals with blank space surrounding and element-->
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 80%;
  border: 3px solid #73AD21;
  padding: 10px; 
  margin: 20px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>

Css text align center

body {
  text-align: center;
}

Similar codes

10 votes180 views4 answers
Css align ul li horizontal
CSS
0 vote152 views1 answer
Call circle icon in html css
CSS
0 vote232 views2 answers
Https://www.youtube.com/s/desktop/f357c206/cssbin/www-main-desktop-watch-page-skeleton.css
CSS Skeleton
-2 votes153 views1 answer
How to add after psuedo class in html
CSS
0 vote123 views1 answer
Sweet alert modal form
CSS
1 vote154 views1 answer
Vertical line between two divs
CSS
51 votes139 views4 answers
Style scrollbar
CSS
16 votes142 views4 answers
Arrow up css
CSS
0 vote137 views1 answer
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
CSS
2 votes154 views6 answers
Add image to css
CSS