How to align text to top of div năm 2024

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

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

Why is Centering CSS Elements So Hard?

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

You can just set text-align to center for an inline element, and

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

3 would do it for a block-level element.

But issues arise 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 center a div, text, or image in CSS.

How to Center an Element with the CSS Position Property

The CSS position property takes relative, absolute, fixed, and static (the default) as values. When set, you will be able to apply the top, right, bottom, and left properties to the element.

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

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

How to center text with CSS positioning

<div class="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-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

How to center an image with CSS positioning

<div class="container">
    <div class="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;
  top: 50%;
  transform: translateY(-50%);
}

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

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

The text now looks like this:

And the image like this:

Note that I applied the transform property because the child (with the class of centered-element) was slightly off-center.

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

4 pushes it to the center vertically and translate on both the X and Y-axis (

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

5. 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 easy to center a div, text, or image in just three lines of code.

Check the snippets below for examples.

How to center text with Flexbox

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

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

How to center an image with Flexbox

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

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

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

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

<div class="container">
    <div class="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;
  top: 50%;
  transform: translateY(-50%);
}

1

The text now looks like this:

And the image like this:

How to Center an Element with CSS Grid

With Flexbox, it is pretty easy to center anything, right? But with CSS Grid, it is really easy to center anything, because two lines of code are enough to do it for you.

How to center text with CSS Grid

<div class="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-element {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3

How to center an Image with CSS Grid

<div class="container">
    <div class="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;
  top: 50%;
  transform: translateY(-50%);
}

3

The above examples takes care of vertical centering for you. To get the text and image centered horizontally too, replace the align items with

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

6 – a combination of both

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

7 and

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

8:

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

6

The text now looks like this:

And the image like this:

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

The three methods above let you center a div, text, or image in a container. You can also center a standalone div, text, or image.

Let's see how to do that now.

How to center a standalone div in CSS

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

7

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

8

How to center standalone text in CSS

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

9

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

0

How to center a standalone image in CSS

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

1

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

2

Conclusion

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

Thank you for reading, and keep coding.

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

How do you put text on top of a div?

Position the div relatively ( position: relative; ), and then the text absolutely ( position:absolute; ). Make sure the text is inside an element inside the div, and then set the nested element's top position to a negative number until it is positioned to your liking.

How do I align the content of a div to the top?

How to Center a Div Vertically.

Give the div a CSS class like center..

In your CSS code, type your .center CSS selector and open the style brackets..

Set the position of your div to absolute so that it's taken out of the normal document flow..

Set the top property to 50%..

How do I align text in a div?

Using Text Align: Set the parent container to text-align: center. This centers the child element horizontally within the parent container. Use line-height: <height> to center the child element vertically within the parent container. The value of <height> should be equal to the height of the parent container.

How to text align top in HTML?

The HTML <td> valign attribute specifies the vertical alignment of content within a table cell. It can accept values such as top, middle, bottom, or baseline to control the positioning of content. If not explicitly set, the content in a table cell is vertically aligned to the middle by default.