place DIV in the center of the page

Asked

Viewed 1,486 times

1

How do I get this div to the center of the page?

.dialogbox { 
position: absolute;
top: 30px;
width: 550px;
border-radius: 4px;
background: #FFFFFF;
margin: auto auto;
overflow: hidden;
display: none;
z-index: 9999;
}

I need to maintain the properties 'position: Absolute; top: 30px;' as it will appear on top of other div, and with a margin on top of 30px;

css

  • In the center with respect to width then?

  • Yes that’s right, horizontal

  • Dude, I think it’s left: 50%

  • http://answall.com/questions/806/howto center horizontally on one side. see if this does not help you

  • not da, it gets crooked, I have to keep the size of the div of 'width: 550px;'

  • margin: 0 auto? http://pt-br.learnlayout.com/margin-auto.html Obs: this is a lifehack

  • The problem is being due to the size being px, so the centering should be in function of the screen size. Can’t leave as with in %? Take a look at this: https://css-tricks.com/forums/topic/horizontal-centering-of-an-absolute-element/

Show 2 more comments

1 answer

3


Try it like this:

.dialogbox { 
  position: absolute;
  top: 30px;
  left: calc(50vw - 275px);
  width: 550px;
  border-radius: 4px;
  background: #FFFFFF;
  margin 0;
  overflow: hidden;
  z-index: 9999;
  
  background: red;
  min-height: 200px;
}
<div class="dialogbox"></div>

  • what is '50vw'?

  • Half the width of the window. If it is relative to something else, you can use 50% instead.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.