How do I center list items inside a UL element?

Question

How do I center list items inside a ul without using extra divs or elements. I have the following. I thought text-align:center would do the trick. I can\'t seem

Answer 1

ul {
    width: 100%;
    background: red;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    background: blue;
    color: white;
    margin-right: 10px;
}