Html 如何使用CSS将div和ul居中？

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

以下是链接：

这是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; }

---

您可以使用

margin right:auto

，

margin left:auto

进行水平对齐，使用

vertical align:middle

进行垂直对齐

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

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;
}

---

下面的代码为我做了

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

移动导航{
宽度：100%；
保证金：0自动；
}
ulli{
浮动：左；
/*左：3%*/
列表样式：无；
字号：0.6em；
}

---

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

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

---

要了解更多信息，请参见

有时您必须尝试不同的方法。如果不起作用，你可以试试这个。你可以搜索w3shcools.com或w3.org以获得更多的中心方法。它起作用了@kfreeman040208，你能帮我吗？