将list-style-position: inside添加到ul元素。(example)
list-style-position property的默认值是outside。

ul {
    text-align: center;
    list-style-position: inside;
}

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

另一种选择（产生的结果略有不同）是将整个ul元素居中：

.parent {
  text-align: center;
}
.parent > ul {
  display: inline-block;
}

<div class="parent">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

您可以在ul元素上使用list-style-position: inside;来实现：

ul {
    list-style-position: inside;
}

See working fiddle

TL;DR

ul {
  padding-left: 0;
  list-style-position: inside;
}

**说明：**第一个属性padding-left: 0清除ul元素的默认填充/间距，而list-style-position: inside使li的点/项目符号像普通文本一样对齐。

所以这个代码

<p>The ul element</p>
<ul>
asdfas
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

如果没有CSS，我们会给予这样的结果：

但如果我们在顶部添加CSS给予，就会得到这样的结果：

我今天找到了答案。也许太晚了，但我仍然认为这是一个更好的。检查这个https://jsfiddle.net/Amar_newDev/khb2oyru/5/
尝试更改CSS代码：<ul> max-width:1%; margin:auto; text-align:left; </ul>
max-width：80%或类似的值。
尝试一下，你可能会发现一些新的东西。

你要这么做。
首先，这样装饰你的列表：

<div class="p">
<div class="text-bullet-centered">&#8277;</div>
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
</div>
<div class="p">
<div class="text-bullet-centered">&#8277;</div>
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text 
</div>

添加此CSS：

.p {
    position: relative;
    margin: 20px;
    margin-left: 50px;
}
.text-bullet-centered {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translate(0%,-50%);
    font-weight: bold;
}

瞧，它起作用了。调整窗口的大小，以确保它确实有效。
作为奖励，你可以很容易地改变字体和颜色的项目符号，这是很难做到的正常列表。

.p {
  position: relative;
  margin: 20px;
  margin-left: 50px;
}

.text-bullet-centered {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translate(0%, -50%);
  font-weight: bold;
}

<div class="p">
  <div class="text-bullet-centered">&#8277;</div>
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text
</div>
<div class="p">
  <div class="text-bullet-centered">&#8277;</div>
  text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  text text text text text text text text text text text text text
</div>