HTML输出设计位置问题

Question

如何将以下HTML的输出/结果放到页面中心？即，输出必须使用css在web / html页面的水平和垂直中心对齐！我试过下面的代码。但不能正常工作。输出框仅以水平居中对齐。垂直对齐没有发生。请帮忙。

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.container ul li {
  vertical-align: middle;
}

li a:hover {
  background-color: Red;
}

#container {
  text-align: center;
}

ul {
  display: inline-block;
}

＆＃13;

<div id="container">
  <ul>
    <li><a href="#home">Apple</a></li>
    <li><a href="#home">Banana</a></li>
    <li><a href="#home">Mango</a></li>
    <li><a href="#home">Grapes</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一种解决方案是按照Sebastian的说明使用flexbox。 其他简单的解决方案是将#container置于绝对位置，并使用以下CSS将其显示在中心：

#container {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Answer 2

您可以使用display:flex将其居中。阅读有关flex here的更多信息。

请注意，您必须使用html,body{height:100%}将身体拉伸至整个窗口高度。

＆＃13;

＆＃13;

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.container ul li {
  vertical-align: middle;
}

li a:hover {
  background-color: Red;
}

#container {
  text-align: center;
}

ul {
  display: inline-block;
}

＆＃13;

<div id="container">
  <ul>
    <li><a href="#home">Apple</a></li>
    <li><a href="#home">Banana</a></li>
    <li><a href="#home">Mango</a></li>
    <li><a href="#home">Grapes</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

非弯曲方法：

如果您不想使用flex（例如，为了支持旧浏览器）

- 由@Sebastian Speitel建议，

您可以使用绝对定位 - 这需要您为容器设置固定高度。

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.container ul li {
  vertical-align: middle;
}

li a:hover {
  background-color: Red;
}

#container {
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 50px;
}

ul {
  display: inline-block;
}

＆＃13;

<div id="container">
  <ul>
    <li><a href="#home">Apple</a></li>
    <li><a href="#home">Banana</a></li>
    <li><a href="#home">Mango</a></li>
    <li><a href="#home">Grapes</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;