Html center div vertically

How to center a div in CSS

In this article, we are going to learn how to center a div in CSS both horizontally and vertically using 15 different methods with examples.

As a web developer, one of the most common things that you will most frequently need to do is to center a div element using CSS .

1. Using align property
2. Using flexbox (justify-content)
3. Position absolute and margin auto
4. Position absolute and translateX
5. Using table
6. Using CSS table property

1. Using flexbox (align-items)
2. Position absolute and margin auto (vertical center)
3. Position absolute and translateY (vertical center)
4. Using table (vertical center)
5. Using CSS table property (vertical center)

Center div Horizontally In CSS

Let’s see how you can align div elements to center horizontally. We have discussed 5 different ways for it, of which margin auto and flexbox is the most commonly used method.

1. Center div Horizontally using margin method

To center a div element horizontally you can simply use the margin property of CSS. It is the easiest way to align a div to the center.

Give margin-left: auto and margin-right: auto to the element or you can use shorthand margin: 0 auto , this will automatically adjust the element to the center of its parent element horizontally by leaving equal spaces to its left and right side.

Here is an example in which a child element is aligned to the center using margin property.

/* center element using margin property */ .center < margin: 0 auto; >.parent < padding: 20px; background: #7E89B4; border: 2px solid #4B5681; >.child

Note : To align any element to center horizontally you need to keep 2 things in mind:

1. The element must be a block label element. If the display property of an element is inline or inline-block then it will not center using align property.
2. The width of the element should be smaller than the parent element. If the element is itself bigger than its parent then will be unable to get equal spacing from its left and right side and hence won’t center.

2. Center div Horizontally using flexbox

One of the best ways to align the div element to the center horizontally is by using the CSS flexbox.

Using flexbox you can position any element in 2D (horizontal and vertical). Here we will center div horizontally.

First, add display: flex property to the parent of the div element to make it a flex container, then use the justify-content property. Set justify-content: center to center horizontally.

Remember the flex property should be applied to the parent element. Here is the example code.

/* center element using flexbox */ .center < display: flex; justify-content: center; >.parent < border: 2px solid #4B5681; background: #7E89B4; padding: 20px; >.child

3. Center div Horizontally Using Position absolute and margin auto

An element having an absolute position is like a floating element in the parent element. You can move it wherever you want within the document.

To align the child element center horizontally you need to apply left: 0 , right: 0 , and margin-left: auto , margin-right: auto to the element ( margin: 0 auto shorthand).

.parent < position: relative; border: 2px solid #4B5681; background: #7E89B4; height: 100px; >/* center element using position absolute and margin auto */ .child

4. Center div horizontally using position absolute and translateX

Using position property and translateX you can align the element horizontally as well as vertically to center. Here we will see horizontal alignment.

For this, the position of the parent element should be relative and the position of the child element should be absolute .

Now, shift the child element 50% to its left.

This left shift of 50% will make the child element start from midway to the right side of the parent element.

You can see in the above picture we want to center the box horizontally but it starts from the middle of the parent element. So we can apply the translateX property and move the child element 50% in a negative direction which will align it in the center. Now add transform: translateX(-50%) to finally center the child element.

5. Center div Horizontally using table

Using a table to design a page layout is not used nowadays, but it’s worth it to know that you can use this to center the element horizontally.

To center an element horizontally in the table use text-align: center to parent and display: inline-block to the child element.

To see the code in effect width of the child should be less than the parent element so we have set the parent width to 100vw for understanding purposes.

Here is HTML and CSS code as an example.

6. Center div Horizontally Using Display table-cell

CSS enables us to change ordinary elements into the effect of table elements. Using this feature and concept used in the above approach you can center the element horizontally.

Set display: table-cell and text-align: center to the parent element and display: inline-block to the child element.

2. Center div Vertically In CSS

Now we will see how to center a div vertically in CSS. For most cases you can refer above methods of horizontal alignment and add a few more properties to center it vertically also, but anyway we will discuss it in detail.

1. Center div Vertically Using flexbox

Using flexbox you can align elements both in the horizontal and vertical direction. Here we will align the div in the vertical direction.

First, you need to define display: flex to the parent element. Now the element inside this parent element becomes flex items.

To align the child elements vertically use the align-items property and set its value as the center .

/* Center vertically */ .parent < display: flex; align-items: center; border: 2px solid #4B5681; background: #7E89B4; height: 200px; >.child

2. Center div Vertically Using Absolute position and margin auto

We already know the element having an absolute position is can be moved very easily within the webpage. Using this we can also align to the center.

To align the child element center vertically you need to apply top: 0 , bottom: 0 and margin-top: auto , margin-bottom: auto to the element ( margin: auto 0 shorthand).

3. Center div Vertically Using position absolute and translateY

In the same way, you centered the element horizontally using position absolute and translateX, you can use translateY to center the element vertically.

To do this set position: relative to the parent element and position: absolute to the child element and top: 50% .

This will flow the child element to start from the verticle middle of the parent element, which is not the center but you can use transform: translateY(-50%) to shift it up by 50% which will make it verticle align to the center.

4. Center div Vertically Using the table

As we have discussed above you can also use the table to create a layout and center element (not recommended).

To center an element vertically in the table use vertical-align: middle to parent and display: inline-block to the child element.

To see the code in effect height of the child should be less than the height parent element so we have set the parent height to 200px for understanding purposes.

Источник

How TO — Center Elements Vertically

Learn how to center an element vertically and horizontally with CSS.

I am vertically and horizontally centered.

How To Center Anything Vertically

Example

.vertical-center margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
>

How To Center Vertically AND Horizontally

Example

.center margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
>

You can also use flexbox to center things:

Example

.center <
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
>

Tip: Go to our CSS Align Tutorial to learn more about aligning elements.

Tip: Go to our CSS Transform Tutorial to learn more about how to scale elements.

Tip: Go to our CSS Flexbox Tutorial to learn more flexbox.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

Kolade Chris

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 margin: 0 auto 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

 
 
I'm a Camper, and I'm vertically centered
 
 
 

* < margin: 0; padding: 0; box-sizing: border-box; >.container < position: relative; height: 400px; border: 2px solid #006100; >.centered-element

How to center an image with CSS positioning

* < margin: 0; padding: 0; box-sizing: border-box; >.container < position: relative; height: 400px; border: 2px solid #006100; >.centered-element

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

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. translateY() pushes it to the center vertically and translate on both the X 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 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

 
 
I'm a Camper, and I'm vertically centered
 
 
 

How to center an image with Flexbox

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.

 
 
I'm a Camper, I'm now vertically and horizontally centered
 
 
 

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

 
 
I'm a Camper, and I'm vertically centered
 
 
 

How to center an Image with CSS Grid

The above examples takes care of vertical centering for you. To get the text and image centered horizontally too, replace the align items with place items – a combination of both align-items and justify-content :

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

How to center standalone text in CSS

I'm a Camper, and I'm centered
 

How to center a standalone image in CSS

img < display: block; margin: 0 auto; >/* Applies a display of block, a margin 0f 0 at the top and bootom, and auto on the left and right */ 

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.

Источник