以变​​换为中心的绝对位置

Question

我有一些列表项目要居中。我必须使用绝对位置，因为它与另一个div重叠。我可以用位置和变换属性来做到这一点。但是当设备宽度较小时会出现问题。我希望它尽可能长时间居中，但它在设备宽度足够小之前就会中断。我可以使用 calc 修复它，但是当ul宽度未知时该怎么办？
codepen

＆＃13;

＆＃13;

.parent {
  height: 70px;
  margin-top: 100px;
  width: 100%;
  background: #000;
  position: relative;
}

ul,li {
  list-style-type: none;
}

ul {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
  top: 0;
  left: 50%;
  transform: translate(-50% , 0);
  clear:both;
  display:block;
}

li {
  height: 70px;
  width: 70px;
  background: #f44;
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

＆＃13;

<div class="parent">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么不简单地将text-align: center添加到ul标记，而根本没有变换或位置。 如果li是内嵌块，它将居中并以ul边界包裹。

Answer 2

更新您的ul规则，其中left: 0 / right: 0将使其全宽，text-align居中li＆＃39; s

ul {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  text-align: center
}

示例代码段

＆＃13;

＆＃13;

.parent {
  height: 70px;
  margin-top: 100px;
  width: 100%;
  background: #000;
  position: relative;
}

ul,li {
  list-style-type: none;
}

ul {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  text-align: center
}

li {
  height: 70px;
  width: 70px;
  background: #f44;
  display: inline-block;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}

＆＃13;

<div class="parent">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;