How to center items in css

How to center a div in css

.center {
    position: fixed;
    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 items 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

Css center text in div

/* For horizontal align: */
parent-element {text-align:center;}
/* For horizontal and vertical align: */
parent-element {position: relative;}
element-to-be-centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* See https://www.w3schools.com/css/css_align.asp for more info */

How to center an element in css

.container{
  display:bock;
  width:fit-content;
  margin:auto;
}

Similar codes

1 vote222 views2 answers
Eloquent map collection
CSS
0 vote195 views1 answer
Materialize css form file input
CSS
32 votes189 views6 answers
Css font face
CSS
0 vote194 views1 answer
Hwo to reload css in flask
CSS
0 vote174 views2 answers
Position relative get in center
CSS
0 vote208 views1 answer
Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations
CSS
0 vote175 views1 answer
Divi submenu collapse by default
CSS
29 votes180 views6 answers
BackgroundImage react
CSS
1 vote171 views1 answer
Scroll-behavior not working
CSS
3 votes203 views1 answer
Top left right bottom css shorthand
CSS