如何在CSS

Question

的李內水平居中一個div我有一個非常簡單的下拉菜單，就像這樣：

<ul class="nav multilevel"> 
    <li><a href="#">item 1</a></li> 
    <li><a href="#">item 2</a></li> 
    <li><span>item 3 +</span> 
     <div class="cntLevel level"> 
      <ul> 
       <li><a href="#">short item 1</a></li> 
       <li><a href="#">very long menu item 2</a></li> 
       <li><a href="#">medium menu item</a></li> 
      </ul> 
     </div> 
    </li> 
</ul> 

與下面的CSS：

ul {margin:0; padding: 0; list-style: none;} 

.nav { 
    background-color: #aaa; 
    text-align: center; 
} 

.nav > li { 
    position: relative; 
    display: inline-block; 
    padding: 30px; 
} 

.nav > li:hover { 
    background-color: #ececec; 
} 

.nav > li > a, .nav > li > span { 
    font-size: 20px; color: #333; text-decoration: none; 
    cursor: pointer; 
} 

.multilevel .cntLevel { 
    display: block; 
    position: absolute; 
    right: 0; top: 83px; 
    z-index: 100; 
} 

.cntLevel { 
    padding: 5px 0; 
    background-color: rgba(40, 40, 40, 1); 
} 

.level li { 
    white-space: nowrap; 
} 

.level li a { 
    display: block; 
    padding: 5px 20px; 
    color: #a6a6a6; 
    text-align: left; text-decoration: none; 
} 

.level li a:hover { 
    color: red; 
} 

所有完美的作品！這裏的的jsfiddle作爲證明：

https://jsfiddle.net/jq2ub0jr/1/

那麼，有什麼問題。這裏是：

我想將子菜單（下拉菜單）居中到<li>（列表項）。現在，它是正確的。我可以通過聲明一個固定的寬度和一個負的左邊寬度左邊的屬性來實現它。但是，我絕對不想添加固定寬度。

如何將我的下拉菜單中心與<li>對齊？

由於

Answer 1

你的容器（li）的相對定位。

你的子菜單div（li的孩子）是絕對定位的。

要居中的子菜單，所有你需要做的就是添加...

left: 50%; 
transform: translate(-50%, 0); 

...子菜單div。

然後你需要一個寬度。但是你不想要一個固定的寬度。所以添加的最小寬度：

min-width: 200px; 

所以樣式規則變爲：

.multilevel .cntLevel { 
    display: block; 
    position: absolute; 
    /* right: 0; remove this */ 
    top: 83px; 
    z-index: 100; 

    /* NEW */ 
    left: 50%; 
    transform: translate(-50%, 0); 
    min-width: 200px; 
    } 

的子菜單現在爲中心，將較長的文本擴展。

演示：https://jsfiddle.net/jq2ub0jr/6/