HTML output design position issue

Question

How can I make the output/result of the below HTML to the center of the page ? ie, the output must be aligned both Horizontally and vertically center of the web/html page using css !! I tried with below code. But not working properly. The output box is only aligned horizontally centered. Vertical aligned is not happening. please help.

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

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

Possible duplicate of [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — Andrew Schultz, Apr 01 '18 at 11:44

score 1 · Accepted Answer · answered Apr 01 '18 at 12:38

one solution is to use flexbox as explained by Sebastian. other easy solution would be to bring the #container to the absolute position and display it in the center using the following CSS:

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

score 0 · Answer 2 · answered Apr 01 '18 at 11:46

You can use display:flex to center it. Read more about flex here.

Keep in mind, that you have to stretch the body to the full window height using html,body{height:100%}.

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

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

score 0 · Answer 3 · answered Apr 01 '18 at 12:39

Non flex method:

If you don't want to use flex (in order to support older browsers, for instance)

-as suggested by @Sebastian Speitel,

you can use absolute positioning - which will require you to set a fixed height to your container.

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

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

HTML output design position issue

3 Answers3

Non flex method: