Расположите левосторонние элементы в центре страницы

Question

У меня есть следующий пример: https://jsfiddle.net/fbwv8jhp/ со следующими стилями:

.menus {
  height: 200px;
  width: auto;
  margin: auto;
}

.menu{
  width: 200px;
  height: 30px;
  float: left;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 10px;
}

Здесь элементы меню выровнены по левому краю. Но дополнительное желаемое поведение состоит в том, чтобы гарантировать, что независимо от ширины экрана (то есть количества разделов меню, показанных в каждой строке), они отображаются в центре. Это означает, что в каждом ряду расстояние между левым меню и левой границей экрана и правым меню и правой границей экрана должно быть одинаковым, а все меню центрированы. Не смог этого сделать, поэтому, возможно, кто-то знает, как этого можно достичь.

На изображении ниже расстояния 1 и 2 должны быть равны.

Answer 1

Попробуйте использовать css flex-box:

.menus {
  height: 200px;
  width: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.menu{
  width: 200px;
  height: 30px;
  float: left;
  border: 2px solid red;
  margin-left: 10px;
  margin-bottom: 10px;
}