Html 允许居中元素溢出到屏幕的左侧和右侧

我正在使用一个固定宽度和居中的页脚，其中包含一个内联列表

我希望能够减少窗口大小，让我的元素向左和向右溢出，保持内容的中心居中

当页脚中的元素是内联的时，如何实现这一点

图片示例：

编辑：示例

#p-wrapper {
    width:100%; 
    position:fixed;
    bottom: 0;
    height: 25%;
    height: 25vh;
    min-height: 11em;
    max-height: 14em;
    padding: 0;
}

#p-body {
    background: grey;
    border-top: 5px solid black;
    width: 100%;
    height: 100%;
}

/* Tuts */
ul {
    padding: 0;
    height: auto;
    white-space: nowrap;
    overflow: visible;
    overflow-x: visible;
    text-align: center;
}
    li {
        list-style:none;
        display:inline-block;
        margin: 0;
        padding: 0;
        background:#fff;
        height: 10em;
        width: 5em;
        position:relative;
        border: 1px solid black;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;       
    }

<div id="p-wrapper">
        <div id="p-body">
            <ul id="piano">
                 <!-- Start Octave -->
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <!-- End Octave -->
                <!-- Start Octave -->
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <!-- End Octave -->
                <!-- Start Octave -->
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <li class="black">
                <li class="white">
                <!-- End Octave -->
            </ul>
        </div>
    </div>

p-wrapper{ 宽度：100%； 位置：固定； 底部：0； 身高：25%； 高度：25vh； 最小高度：11em； 最大高度：14em； 填充：0； } #p体{ 背景：灰色； 边框顶部：5px纯黑； 宽度：100%； 身高：100%； } /*塔茨*/ 保险商实验室{ 填充：0； 高度：自动； 空白：nowrap； 溢出：可见； 溢出x：可见； 文本对齐：居中； } 李{ 列表样式：无； 显示：内联块； 保证金：0； 填充：0； 背景：#fff； 高度：10公分； 宽度：5em； 位置：相对位置； 边框：1px纯黑； 边框左上半径：4px； 边框右上角半径：4px； 边框左下半径：8px； 边框右下半径：8px； }

---

您可以尝试使用

位置：固定

（或

绝对

），然后将

左偏移量调整为50%，并使用CSS transform属性将块元素向左平移50%

这可能会起作用，但实现的细节将取决于您的其他布局


.footer{
宽度：500px；
文本对齐：居中；
边框：1px点蓝色；
位置：固定；
左：50%；
转化：translateX（-50%）；
}
此页脚文本居中且具有固定宽度。
您能举例说明您现在有什么吗？您的代码段可以工作，但在我的示例中，我在固定div中有内联元素。请实际划掉它；你的回答有效，我只需要把位置设为绝对