html - 如何使用 CSS 居中 div 和 ul？

Question

如何在移动浏览器中使用 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; }

Answer 1

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