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

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

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

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

Ответ 1

HTML:

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

CSS

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

Ответ 2

Самое простое решение - просто использовать автомаршрут и дать вашему 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" margin для верхнего и нижнего равна нулю... так что это будет только центрировать его по горизонтали. Единственное решение для вертикального и горизонтального позиционирования - гасить с отрицательными полями, такими как принятый ответ.

Ответ 3

margin: auto;

Ответ 4

попробуйте это

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

Ответ 5

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

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

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

Ответ 6

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

center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }

Ответ 7

<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 и работает хорошо!

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

 <center>
        <h3 > your div goes here!</h3>    
    </center>