-2

I have a landing page that I'm wanting to get my logo centered. Struggling to figure how to get it exactly in the center and stay there on device scale. I have got the video background to scale accordingly, but I cannot get my logo to go exactly into the center.

Here is a fiddle http://jsfiddle.net/dm1ccm7n/1/

shows a black box and in the square I'm wanting to get centered within the landing div.

This is the specific div needing to be sorted out.

.main_logo{
    background:#000;
    position:relative;
    float:left;
    width:300px;
    height:200px;
    z-index:2000;
    display: block;
    margin: auto;
}
Sender
  • 6,660
  • 12
  • 47
  • 66
factordog
  • 599
  • 5
  • 24

1 Answers1

1

Two simple options:

  • add margin:0 auto to the element that you want to be centered
  • add:display: flex; justify-content: center; align-items: center; to the parent/wrapper element

If the first one doesn't work, the second option definitely should. How it works:

justify-content defines where flex items will align according to the main axis (horizontally in our case).

align-items does the same with the axis perpendicular to the main one (vertically in our case).

divoom12
  • 802
  • 4
  • 12
  • This seemed to have done the trick nicely. However it seems to have made my video div behind it dissapear, will have to figure that one out myself. However is there any way to adjust it to the centre vertically, as its done it perfect horizontally? sorry if these are noob questions. Thanks for the help as well! – factordog Oct 13 '15 at 14:03
  • @factordog well it should be doing that already. The second way is aligning the items vertically, the first is not. When using the 2nd way, make sure that you are applying the styles to the parent, in which you want the element to be x,y centered – divoom12 Oct 13 '15 at 14:06
  • I applied the second method and that seemed to get it to do what I want. However its still positioned right at the top of the main div, so im guessing ill just have to maybe played with the top margin % or something – factordog Oct 13 '15 at 14:13