How To Fix An Off-center Background In Css

CSS Vertical Align – How to Center a Div, Text, or an Image [Example Code]

Even with helpful tools like CSS Grid and Flexbox, centering elements in CSS remains notoriously challenging.

It's been the subject area of many jokes and memes, and when you successfully center something, you lot'll want to brag about it.

Why is Centering CSS Elements And so Difficult?

CSS can exist tricky to work with. For example, if you're trying to marshal something horizontally OR vertically, it's not that difficult.

You lot can just set text-align to center for an inline element, and margin: 0 machine would exercise it for a cake-level element.

But issues ascend on multiple fronts if you're trying to combine both vertical and horizontal alignments.

In this tutorial, I will introduce you to three different methods to correctly middle a div, text, or prototype in CSS.

How to Centre an Element with the CSS Position Belongings

The CSS position belongings takes relative, absolute, stock-still, and static (the default) as values. When set, you will be able to utilize the height, right, bottom, and left backdrop to the chemical element.

The combination of relative and accented values can get a lot of things done, and so you can use it to center anything.

Take a expect at the snippets below to see some examples.

How to center text with CSS positioning

                <div form="container">     <div class="centered-element">       <p>I'm a Camper, and I'm vertically centered</p>     </div> </div>

                * {   margin: 0;   padding: 0;   box-sizing: border-box; }   .container {   position: relative;   height: 400px;   border: 2px solid #006100; }  .centered-chemical element {   margin: 0;   position: absolute;   meridian: fifty%;   transform: translateY(-50%); }

ss1b

How to center an image with CSS positioning

                <div class="container">     <div course="centered-element">       <img src="freecodecamp.png" alt="centered" />     </div> </div>

                * {   margin: 0;   padding: 0;   box-sizing: border-box; }  .container {   position: relative;   height: 400px;   border: 2px solid #006100; }  .centered-element {   margin: 0;   position: absolute;   peak: l%;   transform: translateY(-50%); }

ss2b

The above lawmaking has made the text and image centered vertically. To have care of both vertical and horizontal centering, we need to make a little tweak in the CSS. We'll set the top property to l%, and nosotros'll add together a transform on both the X and Y axes.

                * {   margin: 0;   padding: 0;   box-sizing: edge-box; }  .container {   position: relative;   height: 400px;   border: 2px solid #006100; }  .centered-element {   margin: 0;   position: absolute;   pinnacle: 50%;   left: 50%;   transform: translate(-fifty%, -fifty%); }

The text at present looks like this:
ss4b

And the image similar this:
ss3b

Note that I applied the transform holding because the child (with the class of centered-element) was slightly off-center. translateY() pushes it to the center vertically and interpret on both the Ten and Y-axis (translate()) pushes it to the center vertically and horizontally.

How to Center an Element with Flexbox in CSS

CSS Flexbox handles layouts in one dimension (row or column). With Flexbox, it is pretty piece of cake to center a div, text, or image in just three lines of code.

Check the snippets below for examples.

How to heart text with Flexbox

                <div class="container">     <div class="centered-element">       <p>I'yard a Camper, and I'm vertically centered</p>     </div> </div>

                .container {     display: flex;     marshal-items: center;     height: 600px;     edge: 2px solid #006100;  }

ss5b-1

How to center an image with Flexbox

                <div grade="container">     <div class="centered-chemical element">       <img src="freecodecamp.png" alt="centered" />     </div> </div>

                .container {     display: flex;     align-items: centre;     height: 600px;     border: 2px solid #006100;  }

ss6b

We took care of the vertical alignment in only two lines of code. To brand the image and text horizontally centered, add in justify-content: heart.

                <div class="container">     <div course="centered-element">       <p>I'm a Camper, I'k now vertically and horizontally centered</p>     </div> </div>

                <div form="container">     <div class="centered-element">       <img src="freecodecamp.png" alt="centered" />     </div> </div>

                .container {     display: flex;     align-items: center;     justify-content: center;     height: 600px;     border: 2px solid #006100; }

The text at present looks like this:
ss7bb

And the image like this: ss11bb

How to Center an Element with CSS Grid

With Flexbox, it is pretty piece of cake to center anything, right? But with CSS Grid, it is really easy to center anything, because two lines of code are plenty to practice it for yous.

How to middle text with CSS Grid

                <div class="container">     <div class="centered-element">       <p>I'm a Camper, and I'm vertically centered</p>     </div> </div>

                .container {     brandish: grid;     marshal-items: center;     top: 600px;     border: 2px solid #006100; }

ss8bb

How to center an Paradigm with CSS Grid

                <div form="container">     <div class="centered-chemical element">       <img src="freecodecamp.png" alt="centered" />     </div> </div>

                .container {     display: grid;     align-items: center;     superlative: 600px;     border: 2px solid #006100; }

The to a higher place examples takes care of vertical centering for y'all. To get the text and prototype centered horizontally also, replace the align items with identify items – a combination of both align-items and justify-content:

                .container {     display: filigree;     identify-items: center;     height: 600px;     border: 2px solid #006100; }

The text now looks like this:

ss7bb-1

And the image like this:
ss11bb-1

How to Eye a Standalone Div, Text, or Image in CSS

The three methods to a higher place let you heart a div, text, or epitome in a container. You can as well center a standalone div, text, or image.

Let'south see how to practice that now.

How to center a standalone div in CSS

                <div class="container"></div>

                div.container {     height: 300px;     width: 300px;     border: 2px solid #006100;     margin: 0 auto;   }

ss12bb

How to center standalone text in CSS

                <p>I'k a Camper, and I'one thousand centered</p>

                                  p {          text-marshal: center;      }

ss13bb

How to center a standalone paradigm in CSS

                <img src="freecodecamp.png" alt="centered" />

                img {       display: block;       margin: 0 car;  }  /* Applies a display of block, a margin 0f 0 at the top and bootom,   and auto on the left and correct */

ss14bb

Conclusion

I hope this tutorial gives yous enough knowledge about vertical alignment and how to center elements in CSS so it's less of a hassle for you in your adjacent projection.

Thank you lot for reading, and keep coding.

Larn to lawmaking for gratis. freeCodeCamp'southward open source curriculum has helped more than twoscore,000 people get jobs every bit developers. Become started