如何让列表项在屏幕中完美居中？

你的代码里，列表项看起来没完美居中的核心原因是**<ul>标签自带默认的内外边距**，这些样式会让整个列表相对于.list容器偏移，即使.list已经居中，内部的ul空白也会导致视觉上的不居中。

修复步骤 #

1. 清除ul的默认样式
   给.list ul添加样式，重置默认的margin和padding：

.list ul {
  margin: 0;
  padding: 0;
}

2. （可选）简化居中逻辑
   你当前用绝对定位+transform的方式可以实现居中，但也可以改用body的flex布局来更简洁地实现整体居中，避免绝对定位的潜在问题：
   修改body的样式为：

body {
  background:linear-gradient(180deg, rgba(83,49,128,1) 0%, rgba(125,74,149,1) 35%, rgba(164,104,169,1) 100%);
  width:100vw; 
  height:100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

然后移除.list的绝对定位和transform相关样式，简化为：

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: blue;
}

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anagram - Single Player</title>

    <style>
        body {
            background:linear-gradient(180deg, rgba(83,49,128,1) 0%, rgba(125,74,149,1) 35%, rgba(164,104,169,1) 100%);
            width:100vw; height:100vh;
            margin: 0;
            padding: 0;
            /* 改用flex布局实现整体居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: blue;
        }

        /* 重置ul的默认内外边距 */
        .list ul {
            margin: 0;
            padding: 0;
        }

        .list ul li {
            list-style-type: none;
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
            background: black;
            width: 32px;
            text-align: center;
            margin: 4px;
        }

        .list ul li a {
            text-decoration: none;
            color: white;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="list">
        <ul id="button-list"></ul>
    </div>

    <script>
        let ul = document.getElementById("button-list");
        let word = "MAMALIA";

        for(var i=0; i<word.length; i++){
            let li = document.createElement("li");
            li.innerHTML = "<a href='#'>" + word[i] + "</a>";
            ul.appendChild(li);
        }
    </script>
</body>
</html>

关键说明 #

• 清除ul的默认margin和padding是解决偏移的核心，因为浏览器默认会给ul添加这些样式，导致列表整体偏移。
• 改用body的flex布局可以让代码更简洁，同时避免绝对定位可能带来的响应式适配问题，同样能实现完美居中。

内容的提问来源于stack exchange，提问作者Veri Virgandra