html - center div in the middle of the screen

Question

i have the "main" div here : http://tallevi.net/daniel/?page_id=5 if i change the screen resolution the div is not in the middle, currently the css of the "main" div is :

.#main {
width: 680px;
position: absolute;
right: 35%;
padding: 0 40px 5px 40px;
font: normal 14px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
background: url(images/content_back.png) repeat-y;
}

wha'ts wrong?

Answer 1

要素を中央に配置する最善の方法は、を使用margin: 0 auto;することです。コードを次のように変更してみてください。

#main {
  width: 680px;
  margin: 0 auto;
  padding: 0 40px 5px 40px;
  font: normal 14px Verdana, Arial, sans-serif;
  line-height: 20px;
  z-index: 2;
  background: url(images/content_back.png) repeat-y;
}

Margin: 0 auto は、左右の「自動」マージンを設定し、基本的に中央に配置します。（これは、設定した幅を指定した場合にのみ機能します）

Answer 2

Div のマージンを設定し、margin:0 auto;必要に応じて他の必須プロパティを適用します。

Answer 3

div からすべてのスタイルを削除し、次の css を適用します。

.centerdiv
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px 5px 40px;
  font: normal 14px Verdana, Arial, sans-serif;
  line-height: 20px;
  z-index: 2;
  background: url(images/content_back.png) repeat-y;
}