How to center vertically and horizontally an ul elements tag with lis?

How to center vertically and horizontally an ul elements tag with lis?
0.0 0

#1

https://jsfiddle.net/z4shndrp/4/

how to make an ul element center with flexbox?


#2

justify-content-center
align-items-center
display: flex

All 3 in one code:
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
-webkit-box-pack: center!important;
-ms-flex-pack: center!important;
justify-content: center!important;
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;


#3

https://jsfiddle.net/z4shndrp/21/

Why not work the vertical align-items: center; rule?


#4

justify-content — controls alignment of all items on the main axis.
align-items — controls alignment of all items on the cross axis.

You can use only justify-content


#5

https://jsfiddle.net/z4shndrp/21/

Just work horizontal and also set vertical but that not show in this fiddle any idea? Set both options.


#6

You mean vertical?

I dont understand you … Do you want to your nav be on one line (horizontally)?
in your css type this:

ul li {
display: inline-block;
}

#7

https://jsfiddle.net/z4shndrp/21/

Just want to be centered both axis. If set both to center that why not show center both axis?

Thanks


#8

Because ul and li are by default block level elements

You need li to be inline-block…
ul li {
display: inline-block;
}

See: https://jsfiddle.net/z4shndrp/28/


#9

They are technically centered on both axis. Check out this codepen: https://codepen.io/drding/pen/MVNzPg
If you’ll note, test2 (the one that uses flexbox) you can see it’s aligned both vertically and horizontally. Meanwhile test1 uses margin: auto 0 and inline-block like @stefika mentioned.

Here are a couple of handy guides I’ve been using to learn flexbox:


https://yoksel.github.io/flex-cheatsheet/ (this one is particularly awesome because you can mess around with the flex settings directly on the page)


#10

I talk about center the UL with LI tags on the screen?


#11

Did you mean this?
https://jsfiddle.net/z4shndrp/32/