How can I horizontally center an element?

Question

How can I horizontally center a

within another

using CSS?


  Foo foo

user_6967 · Answer

You can apply this CSS to the inner

:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing

will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}


  Foo foo

EDIT

With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}


  Foo foo

To align the div vertically centered, use the property align-items: center.

user_291727 · Answer

If you don't want to set a fixed width on the inner div you could do something like this:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

  
    Foo foo

That makes the inner div into an inline element that can be centered with text-align.

user_142632 · Answer

Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways. Don't be afraid to experiment; it's not like you'll break anything.

gizmo_9396 · Answer

It cannot be centered if you don't give it a width. Otherwise, it will take, by default, the whole horizontal space.

user_78336 · Answer

CSS 3's box-align property

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

user_1637683 · Answer

For example, see this link and the snippet below:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}


  Foo foo

If you have a lot of children under a parent, so your CSS content must be like this example on fiddle.

The HTML content look likes this:


     Foo Text 
     Foo Text 
     Foo Text 
     
     
     
     
     
     Foo Text

Then see this example on fiddle.

user_9121968 · Answer

You can use display: flex for your outer div and to horizontally center you have to add justify-content: center

#outer{
    display: flex;
    justify-content: center;
}

or you can visit w3schools - CSS flex Property for more ideas.

user_2148893 · Answer

One option existed that I found:

Everybody says to use:

margin: auto 0;

But there is another option. Set this property for the parent div. It works perfectly anytime:

text-align: center;

And see, child go center.

And finally CSS for you:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

user_10429035 · Answer

You can just simply use Flexbox like this:

#outer {
    display: flex;
    justify-content: center
}


    Foo foo

Apply Autoprefixer for all browser support:

#outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

Or else

Use transform:

#inner {
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}


    Foo foo

With Autoprefixer:

#inner {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform:     translate(-50%);
    transform:         translate(-50%)
}

Admin · Answer

Try playing around with

margin: 0 auto;

If you want to center your text too, try using:

text-align: center;

user_7802577 · Answer

We can use Flexbox to achieve this really easily:


    Foo foo

Center a div inside a div horizontally:

#outer {
   display: flex;
   justify-content: center;
}

Center a div inside a div vertically:

#outer {
    display: flex;
    align-items: center;
}

And, to completely middle the div vertically and horizontally:

#outer{
    display: flex;
    justify-content: center;
    align-items: center;
}

user_9826412 · Answer

Just add this CSS content into your CSS file. It will automatically center the content.

Align horizontally to center in CSS:

#outer {
    display: flex;
    justify-content: center;
}

Align-vertically + horizontal to center in CSS:

#outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

user_2074138 · Answer

A very simple and cross-browser answer to horizontal center is to apply this rule to the parent element:

.parentBox {
    display: flex;
    justify-content: center
}

user_7764088 · Answer

With Grid

A pretty simple and modern way is to use display: grid:

div {
    border: 1px dotted grey;
}

#outer {
    display: grid;
    place-items: center;
    height: 50px; /* not necessary */
}

user_3897775 · Answer

How can I horizontally center a
within another
using CSS?

Here's a non-exhaustive list of centering approaches, using:

margin and auto
margin and calc()
padding and box-sizing and calc()
position: absolute and negative margin-left
position: absolute and negative transform: translateX()
display: inline-block and text-align: center
display: table and display: table-cell
display: flex and justify-content: center
display: grid and justify-items: center

1. Center a block-level element using `auto` for horizontal margins

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 auto;
  background-color: rgb(255, 255, 0);
}

2. Center a block-level element using `calc` with horizontal margins

.outer {
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  height: 180px;
  margin: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 255, 0);
}

3. Center a block-level element using `calc` with horizontal padding + `box-sizing`

.outer {
  width: 300px;
  height: 180px;
  padding: 0 calc((300px - 150px) / 2);
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}

4. Center a block-level element using `position: absolute` with `left: 50%` and negative `margin-left`

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  margin-left: -75px;
  background-color: rgb(255, 255, 0);
}

5. Center a block-level element using `position: absolute` with `left: 50%` and negative `transform: translateX()`

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  position: absolute;
  left: 50%;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
  transform: translateX(-75px);
}

6. Center an element using `display: inline-block` and `text-align: center`

.outer {
  position: relative;
  width: 300px;
  height: 180px;
  text-align: center;
  background-color: rgb(255, 0, 0);
}

.inner {
  display: inline-block;
  width: 150px;
  height: 180px;
  background-color: rgb(255, 255, 0);
}

7. Center an element using `display: table`, `padding` and `box-sizing`

.outer {
  display: table;
  width: 300px;
  height: 180px;
  padding: 0 75px;
  background-color: rgb(255, 0, 0);
  box-sizing: border-box;
}

.inner {
  display: table-cell;
  background-color: rgb(255, 255, 0);
}

8. Center an element using `display: flex` and `justify-content: center`

.outer {
  display: flex;
  justify-content: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  flex: 0 0 150px;
  background-color: rgb(255, 255, 0);
}

9. Center an element using `display: grid` and `justify-items: center`

.outer {
  display: grid;
  justify-items: center;
  width: 300px;
  height: 180px;
  background-color: rgb(255, 0, 0);
}

.inner {
  width: 150px;
  background-color: rgb(255, 255, 0);
}

user_3454233 · Answer

This is the best example to horizontally center a

#outer {
    display: flex;
    align-items: center;
    justify-content: center;
}

user_3169136 · Answer

Make it simple!

#outer {
  display: flex;
  justify-content: center;
}

  
  Foo foo

user_5225541 · Answer

Center an Element Without Need of a Wrapper/Parent with Dynamic Height & Width

No side effect: It will not limit a centered element's width less than the viewport width, when using margins in Flexbox inside a centered element

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));

Horizontally + vertically center, if its height is same as the width:

position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));

user_9445290 · Answer

To centre an element horizontally you can use these methods:

Method 1: Using margin property

If the element is a block-level element then you can centre the element by using margin property. Set margin-left and margin-right is to auto (Shorthand - margin: 0 auto).

This will align the element to the centre horizontally. If the element is not a block-level element then add display: block property to it.

#outer {
  background-color: silver;
}
#inner {
  width: max-content;
  margin: 0 auto;
  background-color: #f07878;
}


  Foo foo

Method 2: Using CSS flexbox

Create a flexbox container and use justify-content property and set it to center. This will align all elements horizontally to the centre of the webpage.

#outer {
  display: flex;
  justify-content: center;
  background-color: silver;
}
#inner {
  background-color: #f07878;
}


  Foo foo

Method 3: Using position absolute technique

This is a classic method to centre the element. Set postion:relative to the outer element. Set the inner element's position to absolute and left: 50%. This will push the inner element to start from the centre of the outer element. Now use the transform property and set transform: translateX(-50%) this will make the element centre horizontally.

#outer {
  position: relative;
  background-color: silver;
}
#inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f07878;
}


  
    Foo foo

user_10721198 · Answer

One of the easiest ways...



    
        
    

    
       
            I am a easy horizontally centered div.

user_7901403 · Answer

If you have a parent of some height say, body{height: 200px} or like the below has parent div#outer with height 200px, then add CSS content as below

HTML:


  Foo foo

CSS:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}

Then child content, say div#centered content, will be vertically or horizontally middle, without using any position CSS. To remove vertically middle behavior then just modify to below CSS code:

#centered {
  margin: 0px auto;
}

or

#outer{
  display: flex;
  width: 100%;
  height: 200px;
}
#centered {
  margin: auto;
}


  Foo foo

Demo: https://jsfiddle.net/jinny/p3x5jb81/5/

To add only a border to show the inner div is not 100% by default:

#outer{
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid #000000;
}
#centered {
  margin: auto;
  border: 1px solid #000000;
}


  Foo foo

DEMO: http://jsfiddle.net/jinny/p3x5jb81/9

user_2893733 · Answer

With Sass (SCSS syntax) you can do this with a mixin:

With translate

// Center horizontal mixin
@mixin center-horizontally {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

In an HTML tag:


    I'm centered!

Remember to add position: relative; to the parent HTML element.

With Flexbox

Using flex, you can do this:

@mixin center-horizontally {
  display: flex;
  justify-content: center;
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

In an HTML tag:


    I'm centered!

Try this CodePen!

user_13779469 · Answer

To align a div within a div in middle -

.outer{
  width: 300px; /* For example */
  height: 300px; /* For example */
  background: red;
}
.inner{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: yellow;
}

This will align the internal div in the middle, both vertically and horizontally.

user_13708712 · Answer

Just do this:


  Foo foo

CSS

#outer{
  display: grid;
  place-items: center;
}

user_11384233 · Answer

This can be done by using lots of methods. Many guys'/gals' given answers are correct and working properly. I'll give one more different pattern.

In the HTML file


  Foo foo

In the CSS file

#outer{
  width: 100%;
}

#inner{
  margin: auto;
}

user_7656367 · Answer

Center a div in a div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;       
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;      
}

  
  Foo foo

user_7546060 · Answer

Use:

Style:

#parent {
   display: flex;
   justify-content: center;
}

If you want to center it horizontally you should write as below:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

user_1483143 · Answer

You can use the calc method. The usage is for the div you're centering. If you know its width, let's say it's 1200 pixels, go for:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

So basically it'll add a left margin of 50% minus half the known width.

user_1374554 · Answer

The best I have used in my various projects is


    

.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

fiddle link

user_10326622 · Answer

This will surely center your #inner both horizontally and vertically. This is also compatible in all browsers. I just added extra styling just to show how it is centered.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
}

  
  Foo foo

But of course if you only want it horizontally aligned, This may help you.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
}

  
  Foo foo

user_7707724 · Answer

You can do it by using Flexbox which is a good technique these days.

For using Flexbox you should give display: flex; and align-items: center; to your parent or #outer div element. The code should be like this:

#outer {
  display: flex;
  align-items: center;
}


  Foo foo

This should center your child or #inner div horizontally. But you can't actually see any changes. Because our #outer div has no height or in other words, its height is set to auto, so it has the same height as all of its child elements. So after a little of visual styling, the result code should be like this:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}


  Foo foo

You can see #inner div is now centered. Flexbox is the new method of positioning elements in horizontal or vertical stacks with CSS and it's got 96% of global browsers compatibility. So you are free to use it and if you want to find out more about Flexbox visit CSS-Tricks article. That is the best place to learn using Flexbox in my opinion.

user_2370039 · Answer

This worked for me:

#inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

In this code, you determine the width of the element.

user_11129768 · Answer

.outer
{
  background-color: rgb(230,230,255);
  width: 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}


  
    margin 0 auto

user_9797396 · Answer

I used Flexbox or CSS grid

Flexbox

#outer{
    display: flex;
    justify-content: center;
}

CSS grid

#outer {
    display: inline-grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 3px;
}

You can solve the issue in many ways.

user_9321142 · Answer

div{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

For the normal thing if you are using div in a static way.

If you want a div to be centered when div is absolute to its parent, here is example:

.parentdiv{
    position: relative;
    height: 500px;
}

.child_div{
   position: absolute;
   height: 200px;
   width: 500px;
   left: 0;
   right: 0;
   margin: 0 auto;
}

user_9350702 · Answer

You can add another div which has the same size of #inner and move it to the left by -50% (half of the width of #inner) and #inner by 50%.

#inner {
    position: absolute;
    left: 50%;
}

#inner > div {
    position: relative;
    left: -50%;
}


  Foo foo

Admin · Answer

In the previous examples they used margin: 0 auto, display:table and other answers used "with transform and translate".

And what about just with a tag? Everyone knows there is a

tag which is just not supported by HTML5. But it works in HTML5. For instance, in my old projects.

And it is working, but now not only MDN Web Docs, but other websites are advising not to use it any more. Here in Can I use you can see notes from MDN Web Docs. But whatever, there is such a way. This is just to know. Always being noticed about something is so useful.

user_11720321 · Answer

Try this:

Example

user_9403953 · Answer

In my case I needed to center(on screen) a dropdown menu(using flexbox for it's items) below a button that could have various locations vertically. None of the suggestions worked until I changed position from absolute to fixed, like this:

#outer {
      margin: auto;
      left: 0;
      right: 0;
      position: fixed;
}
#inner {
      text-align: center;
}


  Foo foo

The above codes makes the dropdown to always center on the screen for devices of all sizes, no matter where the dropdown button is located vertically.

user_12924484 · Answer

There are several ways to achieve it: using "flex", "positioning", "margin" and others. Assuming #outer and #inner divs given in the question:

I would recommend using "flex"

#outer {
   display: flex;
   justify-content: center;
   align-items: center;  /* if you also need vertical center */
}

Horizontal align using positioning

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  translate: transformX(-50%)
}

Horizontal and vertical-align using positioning

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: transform(-50%, -50%)
}

Horizontal align using margin

#inner {
 width: fit-content;
 margin: 0 auto;
}

user_5770216 · Answer

We could use the next CSS's class which allow center vertically and horizontally any element against its parent:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

user_5218509 · Answer

Use this code:


    Foo foo


#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

user_4688232 · Answer

<pre><code><style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
</code></pre>

user_8249594 · Answer

One of the easiest ways you can do it is by using display: flex. The outer div just needs to have display flex, and the inner needs margin: 0 auto to make it centered horizontally.

To center vertically and just center a div within another div, please look at the comments of the .inner class below

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}


  
    I am horizontally!

user_6076863 · Answer

CSS justify-content property

It aligns the Flexbox items at the center of the container:

#outer {
    display: flex;
    justify-content: center;
}

user_13435350 · Answer

#outer
{
 display: grid;
 justify-content: center;

}


  hello

enter code here

user_7238789 · Answer

I've seen lots and lots of answers and they are all outdated. Google already implemented a solution for this common problem, which centers the object literally in the middle no matter what happens, and YES it's responsive. So never do transform() or position manually ever again.

.HTML

...

    ... 
    ...

.CSS

.parent {
   display: grid;
   place-items: center;
}

user_7635131 · Answer

#inner {
  display: table;
  margin: 0 auto;
}


  Foo foo

user_7635131 · Answer

The main attributes for centering the div are margin: auto and width: according to requirements:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

user_10123520 · Answer

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}


  Foo foo

user_2817442 · Answer

I found a similar way with margin-left, but it can be left as well.

#inner {
    width: 100%;
    max-width: 65px; /* To adapt to screen width. It can be whatever you want. */
    left: 65px; /* This has to be approximately the same as the max-width. */
}

user_9704900 · Answer

#inner {
  width: 50%;
  margin: 0 auto;
}

user_1892607 · Answer

Recap 2022

This is a very old question so I'm just trying to report the situation today:

CSS grid and flexbox are the best options you have for centering, horizontal or vertical;
margin:auto method works well if the inner content is not a box (inline-block is okay);
margin 50% with transform:translateX(-50%) is brute force but works allright;
same thing with absolute positions and translateX/Y is good for horizontal and vertical centering too, many dialogs use that, stretching height to 100vh;
the good old text-align:center with inline-block still works
the ancient demon called "center tag" still works, actually it's the easiest way for horizontal centering. Deprecated, feared & hated by many but still;
tables (td tags, actually) can center beautifully, horizontal and vertical, but they're also called old hat;
these last 2 will work in email templates too (they're HTML4) if you're unlucky enough to work on one.

That's what it looks like in 2022, and I hope we'll never need more than grids and flexboxes. Those guys are the answer to all our prayers in 1999.

user_17344570 · Answer

You can horizontally center a

within another

by using text-align Property in CSS.

text-align: center is used to center the text of the outer div horizontally.

text-align: right is used to align the text to the right.

text-align: left is used to align the text to the left.

text-align: justify is used to stretch the lines so that each line has equal width.

div.a {
  text-align: center;
}

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

div.d {
  text-align: justify;
}

The text-align Property


text-align: center:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.



text-align: left:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.



text-align: right:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.



text-align: justify:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

user_14769063 · Answer

Flexbox Center Horizontally and Vertically Center Align an Element

.wrapper {border: 1px solid #678596; max-width: 350px; margin: 30px auto;} 
      
.parentClass { display: flex; justify-content: center; align-items: center; height: 300px;}
      
.parentClass div {margin: 5px; background: #678596; width: 50px; line-height: 50px; text-align: center; font-size: 30px; color: #fff;}

Flexbox Center Horizontally and Vertically Center Align an Element
justify-content: center; align-items: center;




  c

user_3277216 · Answer

button {
  margin: 0 auto;
  width: fit-content;
  display: block;
}
// container should have set width (for example 100%)

user_13613400 · Answer

#outer {
display:grid;
place-items:center;
}


  Foo foo

user_15405352 · Answer

I'd simply suggest using justify-content: center; when the container is displayed as flex. and text-align: center; when it is about a text element.

check the code below and modify as per the requirements.

#content_block {
  border: 1px solid black;
  padding: 10px;
  width: 50%;
  text-align: center;
}

#container {
  border: 1px solid red;
  width:100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}


  Foo foo check

user_10144242 · Answer

#outer{
  display: flex;
  width: 100%;
  height: 200px;
  justify-content:center;
  align-items:center;
}

user_16431434 · Answer

*{
        margin: 0;
        padding: 0;
    }
    #outer{
        background: red;
        width: 100%;
        height: 100vh;
        display: flex;
        /*center For  vertically*/
        justify-content: center;
        flex-direction: column;
        /*center for horizontally*/
        align-items: center;
    }
    #inner{
        width: 80%;
        height: 40px;
        background: grey;
    margin-top:5px;
    }




    
    
    horizontally center an element




  1
  2
  3

user_6742006 · Answer

css code

.res-banner{
        width:309px;
        margin: auto;
        height:309px;
    }

user_2913984 · Answer


  Foo foo




#outer{
     display:flex;
     align-items:center;
}

user_5440324 · Answer

For a horizontally centered DIV:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  display: inline-block;
}


  Foo foo

user_19670872 · Answer

You can horizontally align any element using:


    (code goes here)

Or:


    .center-me {
        margin: 0 auto;
    }


    
        (code goes here)

user_9857446 · Answer



  
    Center
    

  

  

    
      This DIV is centered

Please try this. It will work without the HTML center tag.

user_2952495 · Answer

I am spoiled with the most simple center known?

How can I horizontally center an element?

130 Answers