如何实现div水平居中并与左侧文本同行（不受侧边元素空间影响）

嘿，我懂你的需求啦——你想让导航栏完完全全居中在屏幕顶部，不管左边的标题占了多少空间，就好像那个标题根本不影响居中计算一样。咱们来调整代码实现这个效果：

修改后的CSS代码 #

body {
    font-size: 1rem;
    margin: 0;
}

.centerable {
    /* 移除旧的浮动和宽度设置，改用绝对定位实现全局居中 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: .5rem;
}

h3 {
    color: darkslategray;
    display: inline-block;
    font-size: 2rem;
    margin: 5px 0;
}

li {
    background-color: slategray;
    border: slategray solid .2rem;
    border-radius: .1rem;
    color: white;
    float: left;
    list-style-type: none;
    margin: -.1rem;
    padding: .5rem .5rem;
}

ul {
    margin: 0;
    padding: 0;
}

#topbar {
    background-color: #fff2ee;
    box-shadow: 1px 2px #DBCFCB;
    font-family: 'IBM Plex Mono', monospace;
    overflow: auto;
    padding: 10px 5px;
    position: relative; /* 关键：让导航栏的绝对定位以这个容器为基准 */
}

改动说明 #

• 给#topbar添加position: relative：让它成为内部绝对定位元素的参考容器，这样导航栏的居中会基于整个顶部栏的宽度（也就是屏幕顶部的全宽）。
• 重构.centerable的定位：用position: absolute; left: 50%; transform: translateX(-50%)是目前最可靠的绝对居中方案，它会让导航栏容器完全居中于父容器，完全忽略左侧标题的存在。
• 移除冗余代码：删掉了原来ul和li上用于旧居中方案的position: relative、left: 50%、right: 50%等属性，因为现在的居中逻辑更简洁可靠。
• 调整h3的显示方式：把float: left改成inline-block，既保留它在左上角的位置，又避免浮动带来的布局冲突。

HTML部分不需要做任何修改，保持你原来的结构即可。这样调整后，导航栏就会完美居中在屏幕顶部，左侧的标题完全不会干扰它的居中位置啦！

内容的提问来源于stack exchange，提问作者Katie Clark