how to center stuff in css code example
Example 1: center a div in css
.container {
display: flex;
justify-content: center;
align-items: center;
}
Example 2: css center everything
/* to make "align-items: center" work: use "min-height: 100vh;"
100vh = 100% Viewport Height */
body {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
Example 3: center with css
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example 4: 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. */
Example 5: how to center anything inside your container
display: grid;
place-items: center;
height: 100vh;
Example 6: how to center div
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix {
overflow: auto;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
<p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
</div>
</body>
</html>