如何水平居中固定的 div 而宽度适合内部内容

Question

我需要我网站上的导航栏在具有 position: fixed; 属性的同时在页面上保持水平居中，并且我需要宽度始终与 [= 中的内容相同29=]

有没有办法做到这一点？

这是我现在的CSS：

.tab {
    overflow: hidden;
    background-color: #505050;
    padding: 0;
    width: fit-content;
    border-radius: 15px;
    position: fixed;
    top: 0;
    margin-left: 280px;
    z-index: 10;
}

这里是my website，如果你需要的话，看看我需要什么。

Answer 1

删除代码中的margin-left。

水平居中设置 transform 和 left。

将 width 修改为 100%。

.tab {
    overflow: hidden;
    background-color: #505050;
    padding: 0;
    width: 100%;
    border-radius: 15px;
    position: fixed;
    top: 0;
    z-index: 10;
    transform: translateX(-50%);
    left: 50%;
}

Answer 2

在您的选项卡周围添加包装纸

<div class="tabwrapper">
    <div class="tab">
    </div>
</div>

<style>
.tabwrapper {
   position: fixed;
   width: 100%;
   text-align: center;
   top: 0;
}

.tab {
    margin: 0 auto;
    display: inline-block;
}
</style>

Answer 3

另一种选择是在您的元素周围添加一个 flexbox 包装器并固定其位置：

.tab-wrapper {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    border: solid red 1px;
    overflow: hidden;
    z-index: 10;
}

.tab {
    padding: 0;
    border: solid blue 1px;
}

<div class='tab-wrapper'>
  <div class='tab'>
    Content
  </div>
</div>

为视觉清晰度添加了边框。

如何水平居中固定的 div 而宽度适合内部内容

How do I horizontally center a fixed div while having the width fit the content inside

html

css

centering