以未知宽度居中

Question

我通常使用以下代码将具有动态宽度的元素居中。

.horz-vert-center {
   position: absolute;
   left: 50%;
   top:50%;
   transform: translate(-50%,-50%);
 }

问题是元素调整大小的时间比我想要的要早。例如。一个菜单分两行，但它仍然可以放在一行上：

我不太明白，如果我使用 % 值，为什么边距不会继续变小？

演示在这里： https://codepen.io/garethj/pen/LWdaRr

Answer 1

在 ul 上添加 white-space:nowrap; 并在 li 上添加 display: inline-block; float: none; 似乎可以解决问题。

.horz-vert-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space:nowrap;
}
.horz-vert-center li{
  display: inline-block;
  float: none;
}

body {background:#ccc}
*{margin:0;padding:0;font-family:arial;font-size:20px}
ul {list-style-type:none}
li {float:left;margin-right:10px}
li:last-child {margin-right:0;}

<ul class="horz-vert-center">
  <li>About</li>
  <li>Work</li>
  <li>Blog</li>
  <li>Journal</li>
</ul>

Answer 2

另一种使用 "Theodore K." 片段的方法

Demo

.horz-vert-center {
  width:50%;
  margin: auto;
  border: 1px #000 solid;
  text-align: center;
}
.horz-vert-center li{
  display: inline-block;
  float: none;
}

*{margin:0;padding:0;}

<ul class="horz-vert-center">
  <li>About</li>
  <li>Work</li>
  <li>Blog</li>
  <li>Journal</li>
</ul>

以未知宽度居中

Centering with unknown width

html

css

centering