CSS: Cannot horizontally center by using margin

Question

I have tried to using margin: 0 auto; to horizontally center the div elements however I don't understand why the items are always appearing on the left of the HTML page.

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: inline-block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: inline-block;
        vertical-align: middle;
        height: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}

<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

Could anyone tell me what I am doing wrong?

add your code as snippet – Asela Priyadarshana Dec 19 '21 at 03:24 — Asela Priyadarshana, Dec 19 '21 at 03:24

score 0 · Answer 1 · answered Dec 19 '21 at 03:30

0

set text-align:center to main.

main{
display: inline-block;
background: white;
line-height: 300px;
height: 300px;
width: 300px;
resize: vertical;
overflow: auto;
vertical-align: middle;
text-align:center;
}

answered Dec 19 '21 at 03:30

eniigma

39
4

Thanks for your help and i have tried, it works somehow. But i still have questions: 1) why using margin: 0, auto; cannot center the div this time? 2) I want the whole block to be in the center of the HTML page; 3) text-align is only for text element only? Yes, it works to the div element in this case, but i just little bit confuse because as i learnt before text-align is only for text..maybe i am wrong... – Eric Dec 19 '21 at 03:34

score 0 · Answer 2 · answered Dec 19 '21 at 03:45

Try This, I Changed div display properties

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: inline-block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: block;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}

<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

if you need to align whole div to center try flexbox – Asela Priyadarshana Dec 19 '21 at 03:46 — Asela Priyadarshana, Dec 19 '21 at 03:46

score 0 · Answer 3 · answered Dec 19 '21 at 04:09

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
}

div {
        display: block;
        vertical-align: middle;
        height: 100px;
        width: 100px;
        line-height: 100px;
        background-color: black;
        padding: 50px;
        margin: 0 auto;
}

p {
        display: block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
}

<body>
  <main>
    <div>
      <p>Center div</p>
    </div>
  </main>
</body>

Okay, let me explain what is happening over here, you in your post add display inline-block which I changed to block, which means that a particular element main will take up the whole horizontal space, and when you use margin: auto it automatically gives equal margin to both sides, it is working on your code but the thing is you haven't specified the width to the max.

So, whenever you want to center the element using margin: auto, you need to specify the width as 100vh or 100%(if parent div has 100vh)

Somehow i understand your logic, block occupied the whole horizontal space. However, https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align, there tell me that the vertical-align is used for inline, inline-block, table-cell only..... — Eric, Dec 19 '21 at 09:13

score 0 · Answer 4 · answered Dec 19 '21 at 04:16

You have to implement a flexbox or Grid to achieve vertical and horizontal centering! Here I little update on you code

body {
    background: #f06d06;
    font-size: 80%;
}

main {
     display: block;
     background: white;
     line-height: 300px;
     height: 300px;
     margin: 20px auto;
     width: 300px;
     resize: vertical;
     overflow: auto;
     vertical-align: middle;
     margin:auto;
     overflow:hidden;
}

div {
        display: inline-block;
        vertical-align: middle;
        height: 100px;
        line-height: 100px;
        background-color: black;
        margin: 0 auto;
        text-align:center;
        width:100%;
}

p {
        display: inline-block;
        vertical-align: middle;
        color: white;
        margin: 0;
        line-height: 1.5;    
        text-align:center;
}

<body> 
    <main>
        <div>
            <p>center align</p>
        </div>
    </main>
</body>

CSS: Cannot horizontally center by using margin

4 Answers4