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

Question

How to put a div and ul in center of browser both vertically and horizontally using CSS in mobile browser? I tried to do this, but it fails.

Here's the link: http://mobiletest.me/apple_iphone_6s_plus/2544483

Here's the 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; }

and here's the CSS for mobile browser

#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用于垂直

Answer 2

You can follow these steps to effectively center the desired elements :

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

Answer 3

following code did it for me!

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

Answer 4

You can try below code to center align both horizontally and vertically.

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

To know more, see here