how to automatically center children in css?

Question

my css so I can get the browser width and height:

body, html {
    margin:0;
    padding:0;
    line-height: 1.5em;
    height: 100% !important;
    width: 100% !important;
}

this is what I want its' children to center:

<div style={{marginLeft: 'auto', marginRight: 'auto', width: 'inherit', height: 'inherit'}}>
              <ul style={{listStyle: 'none'}}>      
                {this._renderTodos()}
              </ul>
              <Button primary onClick={()=>this._loadMore()}> Load More </Button>
            </div>

I wanted the parent div to inherit the browsers' width and height, I used margin left and right equal to auto, but it's not centering?

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — Peter, Aug 23 '17 at 03:56

score 0 · Answer 1 · answered Aug 23 '17 at 00:30

0

Change your CSS to:

body{
    margin: 0 auto;
}

answered Aug 23 '17 at 00:30

koolkat

706
3
8
23

score 0 · Answer 2 · answered Aug 23 '17 at 00:44

0

Your div is inheriting 100% width from your parent body element, then your ul block element is inheriting the 100% from the parent div.

Try adding a width to your ul and then it will center

ul{ width:50%; margin:0 auto; background:purple}

answered Aug 23 '17 at 00:44

iSZ

682
5
10

how to automatically center children in css?

2 Answers2