是否可以居中放置一个比其父元素更宽且完全没有Javascript的元素？

Question

基本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> 

Answer 2

它可能被认为是一种hack，但是使用纯CSS可以将其放在example-button类上：

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

参见https://jsfiddle.net/08fqfhum/

注意：由于它使用CSS转换，因此无法在旧版浏览器（IE8）上使用。 对于某些浏览器（例如Safari），您也需要添加transform属性的前缀版本：

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