css - 使用CSS将div框居中在页面中间(center a div box in the middle of the page using css)

Question

I want to center a div right in the middle of the page, I tried top:30% , but when the window is resized off the alignment.

(我想在页面中间居中放置一个div，我尝试了top:30% ，但是当调整窗口的大小以使其不对齐时。)

<div id=cent></div>

Thanks Jean

(谢谢让)

  ask by X10nD translate from so

Answer 1

If you know the height/width of that div (for instance, it will be 100px X 200px) then you can do it like this:

(如果您知道该div的高度/宽度（例如，它将为100px X 200px），则可以这样操作：)

#cent {
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px; /* this is half the height of your div*/  
  margin-left:-100px; /*this is half of width of your div*/
}

UPDATE: another option: see http://www.w3.org/Style/Examples/007/center (Centering vertically)

(更新：另一种选择：请参见http://www.w3.org/Style/Examples/007/center （垂直居中）)