center a div inside a fixed one at the center of the screen

Question

I have a div fixed at the top of my screen. Inside this div I put one with position absolute that I want to center in the middle of the screen.

#menu{
  position:fixed;
  width:100%;
  height:30px;
  background:#000;
}

#center{
position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background:#fff;
}

..

<div id="menu">

<div id="center">
how to center this div?
</div>

</div>

if I change the #menu position to relative it works fine... but I need this to be fixed. what is the problem that I cannot put div #center in the middle?

https://jsfiddle.net/y5s77mmq/1/

thank you friends!

Answer 1

There are two ways you can achieve this. One is to give your #center div a fixed position:

#center {
    position:fixed; /* change this to fixed */
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background:#fff;
}

However, this will keep it centered to the screen and not the page.

If you want to center it vertically and horizontally on the web page, one option is to use flex:

#container {
  display: flex;
  /* establish flex container */
  flex-direction: column;
  /* make main-axis vertical */
  justify-content: center;
  /* align items vertically, in this case */
  align-items: center;
  /* align items horizontally, in this case */
  height: 500px;
  /* for demo purposes */
  border: 1px solid black;
  /* for demo purposes */
  background-color: #eee;
  /* for demo purposes */
}

.box {
  width: 300px;
  margin: 5px;
  text-align: center;
}

#center {
  background: #fff;
  width:100px;
  height:100px;
}

<div id="container">
  <!-- flex container -->

  <div id="center" class="box">
    how to center this div?
  </div>

</div>

Also, since the #center div is not related to your #menu div, it shouldn't be nested.

Answer 2

Disclaimer: Looking at your past questions it looks like you know enough about css, so you probably don't need such a long explanation, but I explained everything just in case someone else less knowledgeable about css finds this answer.

The flex solution mentioned by @DrewKennedy is best, but if you cannot use flex for any reason, here is another solution, similar to the first solution DrewKennedy mentioned. This solution uses absolute positioning, so it is centred to the page, but it can be changed to fixed to get the same effect as the other answer.

The basic idea is pretty much the same. When you set it to absolute/fixed positioning, you can set it to be half the screen's width and height from the top and left. This might mean that the content will only start at the middle, so it will not be centred, so in DrewKennedy's answer, he takes away half of the width and the height of the element from the margins to fix this.

However, this solution uses the translation transformation to move it back. When you use the translate() transformation with a percentage, it moves the element relative to it's own size. This means that you can use it for dynamically sized things. This example has a full paragraph in it, and is vertically centred. When you use the exact same css, but have only one word inside the div, it is also still vertically centred..

Here is the relevant css & html:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background-color: #050505;
}
.middle-align {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Works with dynamically sized things too! */
  max-width: 700px;
  min-width: 100px;
  /* Pointless styles to make it look nice: */
  font-family: 'Times New Roman', serif;
  background-color: #ddd;
  padding: 50px;
  outline: 2px solid rgba(0, 0, 0, 0.2);
  outline-offset: -25px;
}

<div class="middle-align">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra fermentum metus sit amet consectetur. Integer dolor purus, pretium at arcu ac, ornare interdum lacus. Cras diam nibh, fringilla sed elementum quis, varius vitae enim. Nunc nec orci
  imperdiet, malesuada nunc vitae, lobortis lacus. Donec et magna ornare, facilisis urna et, hendrerit massa. Aenean vitae convallis nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi quis convallis
  tellus. Maecenas a lorem ac turpis malesuada aliquam et sit amet sem. Nullam eu neque mi. Pellentesque ac ullamcorper felis, a mollis arcu. Vestibulum at dui congue, euismod tortor at, auctor est. Pellentesque faucibus dui nec dui hendrerit vestibulum.
</div>