I am having problems centering a scroll div

Question

I'm trying to place a div that scrolls. I want it dead center on the page but it's not doing it with the code I provided below. Please help.

CSS

#content  
{
text-align: center;
}

.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
overflow:scroll;
}

HTML

<div id ="content">
<div class="scroll"> Stuff </div>
</div>

Answer 1

A div is a block level element and will not listen to text-algin . You will either need to use margin: 0 auto on the .scroll element or make the div an inline-block element. Though support for block level elements to be inline-block level elements is not totally supported so you would have to use a span for complete support. However the better option is if your div has a set width, use a left and right margin of auto on the element you want to center.

Answer 2

text-align only affects text. To position a <div> in the center, use
margin-left:auto;margin-right:auto .

Answer 3

您可以将display:inline;margin:auto到<div> 。

Answer 4

try this

HTML

<div id ="content">
<div class="scroll"> Stuff </div>
</div>

CSS

#content  
{
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    width:300px;
    height:200px;
    overflow: scroll;
}

.scroll
{
    background-color:#fff;
    color:#000;
    width:500px;
    height:400px;
}

live fiddle here