更新：使用垂直中心

Question

我不能在我的div中水平放置我的菜单。它已经垂直居中，但我如何使用CSS水平居中？谢谢你的任何建议。

代码：

<div class="container-2">
            <div class="menu">
                <ul class="navbar-header nav menu-nav">
                    <li><a href="1.html">1</a></li>
                    <li><a href="2.html">2</a></li>
                    <li>logo</li>
                    <li><a href="3.html">3</a></li>
                    <li><a href="4.html">4</a></li>
                </ul>
                </div>
            </div>

CSS：

.menu{
display: inline-block;
margin: auto auto;
position: relative;
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;}


.container-2{
    width: 100%;
    display: table;
    background:rgba(255,255,255,0.755);
    position: absolute;
    height: auto;   
}


.menu-nav{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

如果您想遵循display:table方法，则必须清理CSS并使用display:table; + margin:auto和然后 display:table-cell;并vertical-align:middle;使其正常运行： DEMO

.menu{
margin: auto auto;
display: table;
height: 100px;
text-align: center;
}
.menu-nav{
    background:rgba(255,255,255,0.755);
    padding:0;
    display:table-cell;
    vertical-align: middle;
}
.menu-nav li{
display:inline-block;/* whatever you wanna do with your li */
}

Answer 2

编辑 CSS 代码，如下所示：

JSFiddle（Source）

.menu{
    display: inline-block;
    margin: auto auto;
    position: relative;
    vertical-align: middle;
    height: 100px;
    text-align: center;
}


.container-2{
    width: 100%;
    display: table;
    background:rgba(255,255,255,0.755);
    position: absolute;
    height: auto;
    text-align: center;
}


.menu-nav{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

因此，您需要将text-align: center;添加到.container-2并从display: table-cell;

中删除.menu

更新：使用垂直中心

你可以试试这个：

JSFiddle（Source）

.menu{
    height: 100px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Opera, Chrome, and Safari */
}

.container-2{
    width: 100%;
    background:rgba(255,255,255,0.755);
    position: relative;
    height: auto;   
    text-align: center;
    height: 400px;
}

第三种解决方案

JSFiddle（Source）

HTML

<div class="container-2">
    <div class="menu">
        <div class="menu_inside">
            <ul class="navbar-header nav menu-nav">
                <li><a href="1.html">1</a></li>
                <li><a href="2.html">2</a></li>
                <li>logo</li>
                <li><a href="3.html">3</a></li>
                <li><a href="4.html">4</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

.menu{
    margin: auto auto;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
    text-align: center;
}

.menu_inside{
    display: inline-block;
}

.container-2{
    width: 100%;
    display: table;
    background:rgba(255,255,255,0.755);
    position: absolute;
    height: 300px;
}

.menu-nav{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Answer 3

这是一个JSFiddle：http://jsfiddle.net/5V6gK/

CSS代码：

.menu {width:100%; text-align:center;}
.menu li {float:left; margin:0 10px;}
.menu ul {float:none; clear:both; width:auto; margin:0 auto; list-style-type:none; display:inline-block;}

您需要为.menu课程提供全角。内部元素（<ul>）应该有width:auto; display:inline-block; margin-right:auto; margin-left:auto;。

列表项应该相互浮动。

Answer 4

margin: 0 auto;

这将使您的内容从中间位置对齐向下和向左＆amp;对。将其替换为.menu类。

或者

如果此操作无效，请尝试：

margin-left: 50%;
margin-right: 50%;

div中的中心菜单

4 个答案:

更新：使用垂直中心

第三种解决方案

HTML

CSS