当我想让纯CSS下拉菜单完全居中时，它们会居中于左侧空白

Question

正如标题所说，我在我的网页上有下拉框(模板，因为我想让他们首先正确)，他们已经对齐自己与他们的父在左边缘居中。无论我如何尝试，如果不改变任何对象的宽度或高度，我都无法使它们正确居中。我需要在导航栏内的块链接保持相同的大小，使他们只翻译，如果这个词是悬停在。有没有办法解决这个问题，并保持其他一切不变?

链接到我的网站

HTML和CSS(似乎不能让它在JSFiddle上工作…)

Answer 1

另一种方法是使用absolute属性动态设置left和right的宽度

你可以看到，只要改变你的css如下:

(注意!使用left and right代替width

nav {
  list-style-position: inside;
  list-style: none;
  height: 80px;
  left: 275px;
  right: 0px;
  padding: 0px;
  position: absolute;
  text-align: center;
}

Answer 2

我的方法是将position: relative添加到以下选择器

nav ul li {
   width: auto;
   list-style: inside none none;
   display: inline-block;
   margin-right: 33px;
   height: 16px;
   vertical-align: middle;
   left: 0px;
   margin-left: 33px;
   position: relative;
}

我将定位概述。

nav li ul {
    height: 70px;
    width: 102px;
    padding-left: 0px;
    position: absolute;
    top: 55px;
    border-radius: 9px;
    transition: all 0.2s ease 0s;
    left: -25%;    
    visibility: hidden;
    opacity: 0;
}

我现在看到他们在中间。希望能有所帮助