How to align div to center

Выравниваем блок по центру страницы

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/xkb615mu.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:

Вариант 5. Flexbox.

Одним из самых простых и элегантных способов является использования flexbox. Но имейте ввиду, что центральное позиционирование сохраняется даже если родительский блок меньше дочернего, последний будет выходить за рамки и обрезаться.

В случае, если при уменьшении родительского блока дочерний не должен обрезаться по краям, используйте авто маржины:

Вариант 6. Transform.

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

Centering things is one of the most difficult aspects of CSS.

The methods themselves usually aren’t difficult to understand. Instead, it’s more due to the fact that there are so many ways to center things.

The method you use can vary depending on the HTML element you’re trying to center, or whether you’re centering it horizontally or vertically.

In this tutorial, we’ll go over how to center different elements horizontally, vertically, and both vertically and horizontally.

How to Center Horizontally

Centering elements horizontally is generally easier than centering them vertically. Here are some common elements you may want to center horizontally and different ways to do it.

How to Center Text with the CSS Text-Align Center Property

To center text or links horizontally, just use the text-align property with the value center :

How to Center a Div with CSS Margin Auto

Use the shorthand margin property with the value 0 auto to center block-level elements like a div horizontally:

How to Center a Div Horizontally with Flexbox

Flexbox is the most modern way to center things on the page, and makes designing responsive layouts much easier than it used to be. However, it’s not fully supported in some legacy browsers like Internet Explorer.

To center an element horizontally with Flexbox, just apply display: flex and justify-content: center to the parent element:

How to Center Vertically

Centering elements vertically without modern methods like Flexbox can be a real chore. Here we’ll go over some of the older methods to center things vertically first, then show you how to do it with Flexbox.

How to Center a Div Vertically with CSS Absolute Positioning and Negative Margins

For a long time this was the go-to way to center things vertically. For this method you must know the height of the element you want to center.

Then for the child element, set the position property to absolute and top to 50% :

But that really just vertically centers the top edge of the child element.

How to Center a Div Vertically with Transform and Translate

If you don’t know the height of the element you want to center (or even if you do), this method is a nifty trick.

How to Center a Div Vertically with Flexbox

Like centering things horizontally, Flexbox makes it super easy to center things vertically.

To center an element vertically, apply display: flex and align-items: center to the parent element:

How to Center Both Vertically and Horizontally

How to Center a Div Vertically and Horizontally with CSS Absolute Positioning and Negative Margins

This is very similar to the method above to center an element vertically. Like last time, you must know the width and height of the element you want to center.

To truly center the child element, apply a negative top margin set to half the child element’s height, and a negative left margin set to half the child element’s width:

How to Center a Div Vertically and Horizontally with Transform and Translate

Use this method to center an element vertically and horizontally if you don’t know its exact dimensions and can’t use Flexbox.

How to Center a Div Vertically and Horizontally with Flexbox

Flexbox is the easiest way to center an element both vertically and horizontally.

This is really just a combination of the two previous Flexbox methods. To center the child element(s) horizontally and vertically, apply justify-content: center and align-items: center to the parent element:

That’s everything you need to know to center with the best of ’em. Now go forth and center all the things.

11 Ways to Center Div or Text in Div in CSS

Written by Anna Fitzgerald

Learn more CSS best practices with HubSpot’s free introductory guide.

Whether you’re building a site from scratch or with the Bootstrap CSS framework, you’ll need to have a basic understanding of HTML and CSS to create and customize your layouts.

A major challenge of building layouts is arranging and styling elements on the page. Do you want the elements to overlap or have space between them? Do you want the layout to be responsive? Do you want some text on the page to be centered and the rest left-aligned? These are just a few questions you’ll have to address as you code. Thankfully, divs can help.

In this post, we’ll cover multiple methods for centering elements in CSS, including:

What is a div and why center a div?

Divs — short for content division elements — are HTML elements that can divide your web page into sections so you can target them with unique CSS properties.

For example, say you want to include a caption below an image in a blog post. The body text is left-aligned, black, and 18px, but you want the text in the caption to be centered horizontally, gray, and 14px so that it’s not competing as much for the visitor’s attention. In that case, you could wrap the text in a div element and apply CSS to that specific element. The other text on the page would remain unchanged.

How to Center Text in Div in CSS

Using CSS, you can center text in a div in multiple ways. The most common way is to use the text-align property to center text horizontally. Another way is to use the line-height and vertical-align properties. The last way exclusively applies to flex items and requires the justify-content and align-items properties. Using this method, you can center text horizontally, vertically, or both. We’ll take a closer look at each method below.

Note: Examples included throughout are built on W3Schools’s Tryit Editor. You can click on any of the source links to view the examples in full.

The Beginner’s Guide to HTML and CSS

Fill out the form to learn more about CSS.

How to Center Text in Div Horizontally

There are two ways to center text in a div horizontally. Let’s take a look at examples of each method below.

Using the Text-Align Property

In most cases, you can center text horizontally in a div using the text-align property and defining it with the value «center.»

Here’s the result:

Using the Justify-Content Property

There’s one exception to the rule above. If you are using the display property to define your div as a flex container, then you can’t use the text-align property to center text horizontally within the div. Instead, you have to use the justify-content property and define it with the value «center.»

Let’s create the same div element with a yellow border around it as above. In your HTML, you’d give the div the class name «center» and use the same class selector to style it with CSS. You can start by defining the border property as you did above. Then, define the display property as «flex» to make the div a flex container and define the justify-content property as «center.»

Featured Resource: Intro Guide to CSS & HTML

Here’s the result:

How to Center Text in Div Vertically

There are three ways to center text in a div vertically. They’re slightly more complicated than the methods for centering text in a div horizontally.

Let’s take a look at examples of each method below.

Using the Padding Property

In most cases, you can center text vertically in a div using the padding property. While you can use the longhand form, using the shorthand padding property is easier because you only have to set two values. The first value will set the top and bottom padding. The second will set the right and left padding. Since you want to center the text vertically, the first value can be any positive length or percentage value. The second value should be 0.

Here’s the result:

Using the Line-Height Property

In most cases, you can also center text vertically in a div by setting the line-height property with a value that is equal to the container element’s height.

Here’s the result:

That method will only work for a single line of text. If you have multiple lines of text within a div, then you’ll have to define a few more properties.

Here’s the result:

Using the Align-Items Property

Again, if you are using the display property to define your div as a flex container, then you can’t use the method above to center text vertically within the div. Instead, you have to use the align-items property and define it with the value «center.»

Here’s the result:

How to Center a Div in CSS

You can center a div in a few different ways in CSS. While it’s easy to center a div horizontally on a page, it’s trickier to do so vertically (but still manageable!).

We’ll walk through both these methods below, and then explain how you can center a div horizontally and vertically or center a div within another div.

How to Center a Div Horizontally

To center a div horizontally on a page, simply set the width of the element and the margin property to auto. That way, the div will take up whatever width is specified in the CSS and the browser will ensure the remaining space is split equally between the two margins.

Note that, unlike the margin property, the CSS padding property is used to create space between the border of the div and the paragraph within the div (the inline element).

You can learn more about the differences between these two properties in CSS Margin vs. Padding: What’s the Difference?

Here’s the result:

How to Center a Div Vertically

To center a div vertically on a page, you can use the CSS position property, top property, and transform property.

Start by setting the position of the div to absolute so that it’s taken out of the normal document flow.

Then set the top property to 50%. This tells the browser to line up the top edge of the div with the center of the page vertically (ie. 50% down the page). Here’s the problem: having the top edge of the div lined up in the middle of the page will make the div look off-center. Here’s an example.

To truly center a div, you need to define one last property, known as the CSS transform property. While there are nine different transformation methods (and this is not even including 3D transforms), you want to use the translate() method to move the div along the Y-axis. Specifically, you want to move the div 50% up from its current position. That will tell the browser to put the center of the div in the vertical center of the page.

Let’s take a look at the code you’d need to write.

Here’s the result:

How to Center a Div Horizontally and Vertically

To center a div horizontally and vertically on a page, you can follow almost the exact same steps outlined in the section above. You’ll use the CSS position, top, and transform property — the only difference is that you’ll also use the left property to horizontally center the div.

Start by setting the position of the div to absolute so that it’s taken out of the normal document flow. Then set the left and top properties to 50%. This tells the browser to line up the left and top edge of the div with the center of the page horizontally and vertically (ie. 50% to the right and down the page). If you stop there, you’ll run into the same problem as before: having the edges of the div lined up in the middle of the page will make the div look off-center. Take a look at the example below.

To truly center the div horizontally and vertically, you need to define the transform property. Specifically, you want to move the div 50% to the left and up from its current position. That will tell the browser to put the center of the div in the center of the page.

Here’s the result:

How to Center a Div Within a Div

There are three ways to center a div within a div. With each method, you can center the div within a div horizontally, vertically, or both.

In the examples of the methods below, we’ll go over how to horizontally and vertically center a div within a div.

Using the Position, Top, Left, and Margin Properties

To horizontally and vertically center a div within a div on a page, you can use the position, top, left, and margin properties — if you know the width and height of the divs.

To start, wrap a div element in another div element in your HTML. Give the inner div a class name like «child» and the outer div a class name like «parent.»

If you stop there, you’ll run into the same problem as before: having the edges of the div lined up in the middle of the parent container will make the child div look off-center. To truly center the child div, you can set negative top and left margins. Each value should be exactly half the child element’s height and width.

Here’s the result:

Using the Position, Top, Left, and Transform Properties

To horizontally and vertically center a div within a div whose height and width is unknown, you can use the transform property instead of the margin property. You’ll still use the CSS position, top, and left properties.

Follow the steps above to create the outer and inner divs in HTML. In your CSS, style the outer div in the same way: set the height, width, background color, and position to «relative.»

Now, you’ll style the inner div in almost the same way. You can set the background, set its position to «absolute,» and the top and left properties to 50%. You won’t define the width or height properties though.

You also won’t define the margin property. Instead, you’ll define the transform property to move the child div 50% to the right and down from the container’s edges. This will ensure the child div is truly centered in the parent container.

Here’s the result:

Using Flexbox

You can center a div within a div with Flexbox. Flexbox is a great method since it’s responsive and doesn’t require margin calculations — but there are a few extra steps to keep in mind.

To center a div horizontally and vertically with Flexbox, you need to set the height of the HTML and body to 100%. You can set the height of the parent container to 100% as well, if you’d like it to take up the whole viewport even if it was resized. For this demo, I’ll set the parent container to a specific height instead.

Additionally, you need to define the parent container as a flex container. You can do this by setting the display property to «flex.» Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

You can learn more about the layout module Flexbox by reading Here’s the Difference Between Flexbox, CSS Grid, & Bootstrap. For now, let’s just look at an example.

In the example below, we’ll center a div with a yellow background color, instead of a border, and no text inside. It will look like a yellow square instead. We’ll also add a background color to the parent container so you can more clearly see how the child div element is centered horizontally and vertically.

Here’s the result:

Building Custom Layouts

Whether you’re looking to center a div horizontally, vertically, or within another div, a bit of coding knowledge will allow you to control and customize your layouts. Understanding the margin, positioning, and flex property, for example, will enable you to center virtually any div or block element on a page.

If you’re just starting to learn HTML, CSS, and JavaScript, however, the steps outlined above might seem too complicated. In that case, you can always use a drag-and-drop builder like Elementor. With features like vertical and horizontal alignment and inline positioning, Elementor simplifies every step of the build process so you don’t have to code a single line.

Originally published Aug 9, 2022 7:00:00 AM, updated August 09 2022

Web Style Sheets CSS tips & tricks

See also the index of all tips.

Centering things

Centering lines of text

The most common and (therefore) easiest type of centering is that of lines of text in a paragraph or in a heading. CSS has the property ‘text-align’ for that:

renders each line in a P or in a H2 centered between its margins, like this:

The lines in this paragraph are all centered between the paragraph’s margins, thanks to the value ‘center’ of the CSS property ‘text-align’.

Centering a block or image

Sometimes it is not the text that needs to be centered, but the block as a whole. Or, phrased differently: we want the left and right margin to be equal. The way to do that is to set the margins to ‘auto’. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width. Here is an example:

This rather narrow block of text is centered. Note that the lines inside the block are not centered (they are left-aligned), unlike in the earlier example.

This is also the way to center an image: make it into block of its own and apply the margin properties to it. For example:

The following image is centered:

Centering vertically

This small paragraph is vertically centered.

Centering vertically in CSS level 3

CSS level 3 offers other possibilities. At this time (2014), a good way to center blocks vertically without using absolute positioning (which may cause overlapping text) is still under discussion. But if you know that overlapping text will not be a problem in your document, you can use the ‘transform’ property to center an absolutely positioned element. For example:

This paragraph is vertically centered.

For a document that looks like this:

the style sheet looks like this:

Recently (since about 2015), another technique has also become available in several CSS implementations. It is based on the new ‘flex’ keyword for the ‘display’ property. This keyword is meant for use in graphical user interfaces (GUIs), but nothing stops you from using it in a document, if the document happens to have the right structure.

This paragraph is vertically centered.

the style sheet looks like this:

Centering vertically and horizontally in CSS level 3

We can extend both methods to center horizontally and vertically at the same time.

A side-effect of making the paragraph absolutely positioned is that it is then only as wide as it needs to be (unless we give it an explicit width, of course). In the example below, that’s precisely what we want: We center a paragraph with just one word (“Centered!”), so the width of the paragraph should be exactly the width of that word.

The yellow background is there to show that the paragraph is indeed only as wide as its contents. We assume the same mark-up as before:

The style sheet is similar to the previous example with respect to the vertical centering. But we now move the element halfway across the container as well, with ‘left: 50%’, and at the same time move it leftwards by half its own width in the ‘translate’ transformation:

When the CSS formatter supports ‘flex’, it’s even easier:

with this style sheet:

i.e., the only addition is the ‘justify-content: center’. Just like ‘align-items’ determines the vertical alignment of the container’s contents, ‘justify-content’ determines the horizontal alignment. (It’s actually a bit more complex, as their names suggest, but in a simple case that’s how it works.) A side-effect of ‘flex’ is that the child element, the P in this case, is automatically made as small as possible.

Centering in the viewport in CSS level 3

The default container for absolutely positioned elements is the viewport. (In case of a browser, that means the browser window). So centering an element in the viewport is very simple. Here is a complete example. (This example uses HTML5 syntax.)

You can see the result in a separate document.

(Using ‘translate’ for centering in the viewport was first proposed by “Charlie” in an answer on Stack Overflow.)

Site navigation

Created 5 May 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Center elements
horizontally and vertically

Center Align Elements

To horizontally center a block element (like

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins:

This div element is centered.

Example

Note: Center aligning has no effect if the width property is not set (or set to 100%).

Center Align Text

To just center the text inside an element, use text-align: center;

This text is centered.

Example

Tip: For more examples on how to align text, see the CSS Text chapter.

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

Example

One method for aligning elements is to use position: absolute; :

In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

Example

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

Another method for aligning elements is to use the float property:

Example

The clearfix Hack

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the «clearfix hack» to fix this (see example below).

Without Clearfix

With Clearfix

Then we can add the clearfix hack to the containing element to fix this problem:

Example

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding :

I am vertically centered.

Example

To center both vertically and horizontally, use padding and text-align: center :

I am vertically and horizontally centered.

Example

Another trick is to use the line-height property with a value that is equal to the height property:

I am vertically and horizontally centered.

Example

.center <
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
>

/* If the text has multiple lines, add the following: */
.center p <
line-height: 1.5;
display: inline-block;
vertical-align: middle;
>

If padding and line-height are not options, another solution is to use positioning and the transform property:

I am vertically and horizontally centered.

Example

.center <
height: 200px;
position: relative;
border: 3px solid green;
>

Tip: You will learn more about the transform property in our 2D Transforms Chapter.

You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:

Example

Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.

We just launched
W3Schools videos

COLOR PICKER

Get certified
by completing
a course today!

CODE GAME

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

Web Courses

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.