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

how to make an ul element center with flexbox?

1 Like

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;

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

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

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

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;

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


Because ul and li are by default block level elements

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


1 Like

They are technically centered on both axis. Check out this codepen:
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: (this one is particularly awesome because you can mess around with the flex settings directly on the page)

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

Did you mean this?