it-swarm.com.ru

Как поместить div в центр браузера, используя CSS?

Как поместить div в центр браузера как по вертикали, так и по горизонтали используя только CSS?

Убедитесь, что он работает и в IE7.

Если все не удается, мы можем использовать JavaScript, но последний выбор.

39
jimTong

HTML:

<div id="something">... content ...</div>

CSS:

#something {
    position: absolute;
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
    top: 50%;
    left: 50%;
}
75
James

Самое простое решение - просто использовать автоматическое поле и дать вашему div фиксированную ширину и высоту. Это будет работать в IE7, FF, Opera, Safari и Chrome:

HTML:

<body>
  <div class="centered">...</div>
</body>

CSS:

body { width: 100%; height: 100%; margin: 0px; padding: 0px; }

.centered
{
    margin: auto;
    width: 400px;
    height: 200px;
}

РЕДАКТИРОВАТЬ!! Извините, я только что заметил, что вы сказали вертикально ... по умолчанию "auto" поле для верха и низа равно нулю ... так что это будет центрировать его только по горизонтали. Единственное решение для позиционирования по вертикали и горизонтали - это обойти с отрицательными полями, как принятый ответ.

26
jrista
margin: auto;
11
Rony

попробуй это

#center_div
{
       margin: auto;
       position: absolute;
       top: 0; 
       left: 0;
       bottom: 0; 
       right: 0;
 }
6
M98

Вы также можете установить свой div с помощью следующего:

#something {width: 400px; margin: auto;}

С этой настройкой div будет иметь заданную ширину, а поля и обе стороны будут автоматически установлены в зависимости от браузера.

2
Chris

Используя это:

center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
2
Ajay Kumar
<html>
<head>
<style>
*
{
    margin:0;
    padding:0;
}

html, body
{
    height:100%;
}

#distance
{
    width:1px;
    height:50%;
    margin-bottom:-300px;
    float:left;
}


#something
{
    position:relative;
    margin:0 auto;
    text-align:left;
    clear:left;
    width:800px;
    min-height:600px;
    height:auto;
    border: solid 1px #993333;
    z-index: 0;
}

/* for Internet Explorer */
* html #something{
height: 600px;
}
</style>

</head>
<body>

<div id="distance"></div>

<div id="something">
</div>
</body>

</html>

Проверено в FF2-3, IE6-7, Opera и работает хорошо!

1
Rado
.center {
  margin: auto;
  margin-top: 15vh;
}

Должен сделать трюк

1
Cengkuru Michael

Для старых браузеров вам нужно добавить эту строку поверх HTML документа

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
0
user2567780