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

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

39 голосов
/ 24 июня 2009

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

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

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

Ответы [ 10 ]

76 голосов
/ 24 июня 2009

HTML: 

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

CSS: 

#something {
    position: absolute;
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
    top: 50%;
    left: 50%;
}
27 голосов
/ 25 июня 2009

Самое простое решение - просто использовать автоматическое поле и дать вашему 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;
}
* +1008 * EDIT !! Извините, я только что заметил, что вы сказали вертикально ... по умолчанию "auto" поле для верха и низа равно нулю ... так что это будет центрировать его только горизонтально. Единственное решение для позиционирования по вертикали и горизонтали - это обойти отрицательные поля, как принятый ответ.
11 голосов
/ 24 июня 2009 
margin: auto;
7 голосов
/ 10 марта 2014

попробуйте 

#center_div
{
       margin: auto;
       position: absolute;
       top: 0; 
       left: 0;
       bottom: 0; 
       right: 0;
 }
2 голосов
/ 07 апреля 2016

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

center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
2 голосов
/ 25 июня 2009

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

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

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

1 голос
/ 12 июня 2019 
 <center>
        <h3 > your div goes here!</h3>    
    </center>
1 голос
/ 23 ноября 2016 
.center {
  margin: auto;
  margin-top: 15vh;
}

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

1 голос
/ 25 июня 2009 
<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 и хорошо работает!

0 голосов
/ 10 июля 2013

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

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