React中Div无法通过top/left居中问题咨询及代码示例

本质是两种居中逻辑不一样 #

你给.card加position: absolute; top:50%; left:50%;的时候，其实是把元素的左上角定位到了父级定位容器的中心，不是元素本身的中心对齐父容器，所以看起来没居中。

而margin: 100px auto能生效，是因为这是块级元素的水平居中逻辑：只要元素是块级（或设置了明确宽度），父容器处于正常流布局，auto就会自动均匀分配左右margin，实现水平居中。

用top/left实现居中的正确写法 #

要让absolute定位的元素真正居中，得加一行transform: translate(-50%, -50%);，修改后的样式：

.card {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%); /* 把元素自身往左上挪一半宽高，让中心对齐父容器 */
    width: auto;
    background:white;
    border-radius: 50px;
}

另外得保证父容器（比如App组件的.App div）设置了position: relative;，不然absolute元素会相对于整个页面定位，位置肯定不对：

.App {
    position: relative;
    min-height: 100vh; /* 让父容器占满视口高度，垂直居中才会生效 */
    width: 100%;
}

关于父div宽度超出预期的问题 #

先检查浏览器默认样式，比如body自带的margin，或者.App有没有继承多余的宽度样式。可以在全局的index.css里重置默认样式：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    overflow-x: hidden; /* 防止横向滚动条出现 */
}

内容的提问来源于stack exchange，提问作者Ariel Alvaro