Centered a fixed container over bootstrap carousel

Question

I have a fullscreen version of bootstrap carousel working very nicely.

However, I would like to centre a div containing three icons horizontally and vertically and have it fixed over the sliding carousel images.

I have tried setting a width for the class:

.centered {
  position:fixed; 
  width: 500px;
  margin: 0 auto;

 }

However, the three icons do not more from the top left.

Here is the link to the site if you would like to inspect my HTML code:

http://www.gregorydanelian.comule.com/stu/

Many thanks coders!

Answer 1

Use absolute/fixed centering:

  .parent {
     position: relative;
  }
  .centered {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     width: 500px;
     height: 200px;
 }

With this method you will center horizontal and vertical. The downside is that you will need fixed width and height of the centered element.

Here is the version with position: fixed; http://jsfiddle.net/ngP8f/

Good luck!