如何使用 CSS 使 div 和 ul 居中？答案

【问题标题】：How to center div and ul using CSS?如何使用 CSS 使 div 和 ul 居中？
【发布时间】：2015-10-23 03:43:35
【问题描述】：

如何在移动浏览器中使用 CSS 将 div 和 ul 垂直和水平放置在浏览器的中心？我尝试这样做，但失败了。

这是链接：http://mobiletest.me/apple_iphone_6s_plus/2544483

这是 CSS

.top-menuv2 ul{ list-style-type: none; margin: 10px 20px 0 960px; font-size: 0.80em; float: none; }
.top-menuv2 ul li{ display: inline; margin-right: 20px; font-family: 'Open Sans Bold', sans-serif; line-height: 1.8; }
.top-menuv2 a{ color: black; }
.top-menuv2 .top-navigation{ text-align: center; }
.top-menuv2 ul li > a:hover{ color: #555; text-decoration: underline; }
.top-menuv2 li:hover > ul{display: block; }
.top-menuv2 ul li > a:active{ color: #d31716; }
.top-menuv2 li{ display: inline-block;  position: relative; }
.top-menuv2 li > ul{ position: absolute; right: -50%; top: 20%; width: auto; display: none; white-space: nowrap; z-index: 99; }
.top-menuv2 > li > ul{ top: auto; right: -50%; width: 100%; }
.top-menuv2 li > a:after{ margin-left: 5px; content: '\f107'; font-family: FontAwesome; }
.top-menuv2 > li > a:after{ margin-left: 5px; content: '\f107'; font-family: FontAwesome; }
.top-menuv2 li > a:only-child:after{ margin-left: 0; content: ''; }
.top-menuv2 li > ul > li{ display: block; background: none repeat scroll 0 0 #FFF; border-top: 1px solid #d31716; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); padding: 10px; top: 5px; font-size: 1.20em; }
.header-text{ float: none; color: #000; line-height: 38px; margin-bottom: 0; font-size: 0.80em; }
 #header-text{ float: left; border-radius: 25px; border: 1px solid #CCC; padding: 0 10px 35px 10px; width: auto; height: 30px; margin: 0 0 0 640px; }

这是移动浏览器的 CSS

#header-text{ clear: both; display: block; margin: 0 2em 0 2em; }
#top-menu ul li{ margin: 0 10px 0 100px; }

【问题讨论】：

标签： html css menu center

【解决方案1】：

您可以使用margin-right:auto，margin-left:auto 用于水平，vertical-align:middle 用于垂直

【讨论】：

有时您必须尝试不同的方法。如果它不起作用，你可以试试这个，你可以搜索 w3shcools.com 或 w3.org 以了解更多居中方法。
它有效！ @kfreeman040208，你能帮我解决这个stackoverflow.com/questions/33273019/…吗？

【解决方案2】：

您可以按照以下步骤有效地将所需元素居中：

div.top-navigation.top-menuv2{
  text-align: center;
}

div#header-text{
  float: none;
  width: 232px;
  margin: 0 auto !important;
}

div.top-menuv2 > ul > li:last-child {
  margin-right: 0px;
}

【讨论】：

【解决方案3】：

以下代码为我完成了！

<style>
                nav#mobile {
                    width: 100%;
                    margin: 0 auto;
                }
                ul li {
                    float: left;
                    /*padding-left: 3%;*/
                    list-style: none;
                    font-size: 0.6em;
                }
            </style>
            <nav id="mobile">
                <ul>
                    <li><a href="">Lorem.</a></li>
                    <li><a href="">Accusamus!</a></li>
                    <li><a href="">Dicta.</a></li>
                    <li><a href="">Nam!</a></li>
                    <li><a href="">Deserunt.</a></li>
                </ul>
            </nav>

【讨论】：

【解决方案4】：

您可以尝试以下代码水平和垂直居中对齐。

div#header-text {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

要了解更多信息，请参阅here

【讨论】：