CSS: Cannot horizontally center by using margin

Question

CSS: Cannot horizontally center by using margin

510 Views Asked by Eric At 19 December 2021 at 03:12

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?

Original Q&A

There are 4 best solutions below

**eniigma** · Answer 1 · 2021-12-19T03:30:12.657000

eniigma On 19 December 2021 at 03:30

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;
}

**Asela Priyadarshana** · Answer 2 · 2021-12-19T03:45:05.687000

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>

**Luffy D. Monkey** · Answer 3 · 2021-12-19T04:09:04.293000

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)

**Momin** · Answer 4 · 2021-12-19T04:16:31.053000

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

There are 4 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CENTER-ALIGN

Trending Questions

Popular # Hahtags

Popular Questions