是否有可能将一个比它的父元素更宽的元素居中并且没有Javascript就绝对定位？

Question

BASE HTML/CSS - JSFiddle:https://jsfiddle.net/tae8pc1g/2/

一切都在标题中.JSFiddle中的所有重要代码如下:

<div class="example-button">Menu Button
    <ul class="example-menu">
        <li>This is</li>
        <li>some example</li>
        <li>dynamic</li>
        <li>content</li>
    </ul>
</div>

CSS

.example-button {
    position: relative;
    display: inline-block;
}

.example-menu {
    position: absolute;
    display: inline-block;
    top: 100%;
}

仅使用HTML和CSS,是否可以.example-menu相对于宽度居中,.example-button即使它比宽度大.example-button？

Answer 1

是的,可以使用:

1-对于未知宽度:

left: 50%;
transform: translateX(-50%);

2-对于已知宽度:

left: 50%;
margin-left: -(width/2)

这里有一个可以玩的JSFiddle

body {
    text-align: center;
}

.example-button {
    position: relative;
    padding: 15px;
    border-radius: 5px;
    background: gray;
    display: inline-block;
    text-align: left;
}

.example-menu {
    position: absolute;
    display: inline-block;
    top: 100%;
    background: blue;
    margin:0;
    padding: 10px 70px;
    list-style: none;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

<div class="example-button">Menu Button
    <ul class="example-menu">
        <li>Please</li>
        <li>center</li>
        <li>me!</li>
    </ul>
</div>