Home » Tutorials » HTML5/CSS3 » Margin 0 auto is not working

Margin 0 auto is not working

a piece of css code

Very common problem nowadays is how to actually make margin: 0 auto; to work. You probably know that this CSS rule is used to center some content horizontally on the page. But sometimes it just refuses to work properly.

First check if some of the following solutions will help:

  • The element must not have a fixed or absolute position
  • Try making the element display: block
  • The element must have a width that is not auto
  • The element must not float

Advertisement

I’ve made a simple working example of margin: 0 auto;

The HTML

<div id="parent-div">
    Here is a parent div example. The centered div will be centered in the middle of the parent. 
    <div id="centered-div">I am centered content</div>
</div>

And the CSS

#parent-div
{
    width: 800px;
    border: 1px solid #000; /* not necessary */
}

#centered-div
{
    margin: 0 auto;
    width: 250px;
    border: 1px solid #f00;
}

In case somehow your content is still not centered in the middle of the page, you can try an alternative.

#centered {
   position: absolute;
   left: 50%;
   width: 800px;
   margin-left: -400px; /* Half the width */
}
Very common problem nowadays is how to actually make margin: 0 auto; to work. You probably know that this CSS rule is used to center some content horizontally on the page. But sometimes it just refuses to work properly. First check if some of the following solutions will help: The&hellip;

Review Overview

0%

User Rating: 3.86 ( 8 votes)
0

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Check Also

Change placeholder color

Style HTML5 Placeholder with CSS

In the previous tutorial, I showed you how to create a responsive HTML5 Mail Form. ...

One comment

  1. Now I am gоing аwаy to ԁо my breakfast,
    afterward having my breakfast coming again tߋ
    read fսrther news.

Leave a Reply

Your email address will not be published. Required fields are marked *


Loading Facebook Comments ...