Как разместить некоторый элемент html, например div, в середине окна браузера (а не страницы, а не экрана)? Не зависит от размера окна браузера, разрешения экрана, расположения панели инструментов и т.д. Я хочу, чтобы он находился в середине окна браузера.
Спасибо
Я удивился, что никто не сказал о положении = исправлено. Он делает именно то, что я просил, и работает во всех "человеческих" браузерах и IE с 7.
Для этого вам нужно знать размер элемента, который вы центрируете. Будут выполняться любые измерения (т.е. Px, em, percent), но он должен иметь фиксированный размер.
css будет выглядеть следующим образом:
// Replace X and Y with a number and u with a unit. do calculations
// and remove parens
.centered_div {
width: Xu;
height: Yu;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)u;
margin-top: -(Y/2)u;
}
Изменить. Это центрируется в окне просмотра. Вы можете сосредоточиться только в окне браузера с помощью JavaScript. Но в любом случае это может быть достаточно хорошим, так как вы, вероятно, хотите отобразить всплывающее окно/модальное поле?
Это возможно только с помощью CSS - JavaScript не нужен: Вот пример
Вот исходный код этого примера:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
--></style>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!</div>
</div>
</div>
<div id="footer">
<a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
Вот:
И пример:
<!DOCTYPE html>
<html>
<head>
<title>HTML centering</title>
<style type="text/css">
<!--
html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
#td_wrap { vertical-align: middle; text-align: center; }
-->
</style>
</head>
<body>
<table id="tbl_wrap"><tbody><tr><td id="td_wrap">
<!-- START: Anything between these wrapper comment lines will be centered -->
<div style="border: 1px solid black; display: inline-block;">
This content will be centered.
</div>
<!-- END: Anything between these wrapper comment lines will be centered -->
</td></tr></tbody></table>
</body>
</html>
Взгляните на исходный URL для полной информации: http://krustev.net/html_center_content.html
Вы можете делать все, что захотите, с помощью этого кода. Единственное условие состоит в том, что любая производная работа должна иметь ссылку на оригинального автора.
div#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Если вы не знаете размер браузера, вы можете просто центрироваться в CSS со следующим кодом:
Код HTML:
<div class="firstDiv">Some Text</div>
Код CSS:
.firstDiv {
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #F1F1F1;
}
Это также помогает в любых непредвиденных изменениях в будущем.
У меня было много проблем с центрированием и выравниванием, пока я не нашел Flexbox в качестве рекомендации в руководстве.
Я разместил фрагмент (который работает с Chrome) здесь для удобства:
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
Подробнее см. в статье.
Чтобы центрировать выравнивание div, вы должны применить стиль
div
{
margin: 0 auto;
}
<div align="center">
или
<div style="margin: 0 auto;">
Это проверено и работает во всех браузерах.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%; width: 100%; text-align: center;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; text-align: left;}
#inner {margin-left: auto; margin-right: auto;}
#inner {width: 300px; } /* this width should be the width of the box you want centered */
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
centered
</div>
</div>
</div>
</body>
</html>
Это отличный отзывчивый подход к Абсолютное центрирование
Совместимость с браузером: Chrome, Firefox, Safari, Mobile Safari, IE8-10.
Я не думаю, что вы можете это сделать. Вы можете быть в середине документа, однако вы не знаете макет панели инструментов или размер элементов управления браузера. Таким образом, вы можете сосредоточиться в документе, но не в середине окна браузера.
Если я понимаю вас правильно, вы хотите центрировать элемент вертикально и горизонтально на основе окна, а не документа. Это может быть немного больно, но вы можете использовать javascript для определения размера окна, положения прокрутки, размера элемента и т.д., А затем поместите элемент в центр окна (а не документ, а окно просмотра).
Если вы хотите, чтобы этот элемент оставался в расписании окна при прокрутке, вам нужно было бы зафиксировать событие прокрутки и отрегулировать позицию.
Код для этого отличается от одного браузера к другому.
Вы можете написать JavaScript, чтобы найти высоту и ширину окна и сделать его до половины, чтобы найти центральную точку.
Добавьте материал внутри тега и установите верхнюю часть div и слева от javascript к координатам центра, которые вы нашли, используя Javascript.
Сообщите мне, нужен ли вам код.
Надеюсь, это поможет. Trick - использовать абсолютное позиционирование и настраивать верхний и левый столбцы. Конечно, "мертвый центр" будет зависеть от размера объекта /div, который вы встраиваете, поэтому вам нужно будет выполнить определенную работу. Для окна входа в систему я использовал следующее: он также имеет некоторую безопасность с максимальной шириной и максимальной высотой, которая может быть действительно полезной для вас в вашем примере. Настройте значения ниже для ваших требований.
div#wrapper {
border: 0;
width: 65%;
text-align: left;
position: absolute;
top: 20%;
left: 18%;
height: 50%;
min-width: 600px;
max-width: 800px;
}
вы можете центрировать любой объект в окне просмотра, вот пример использования jquery
$(document).ready(function()
{
posicionar("#midiv");
$(window).on("resize", function() {
posicionar("#midiv");
});
function posicionar(elemento){
var altoDocumento = $(window).height();//alto
var anchoDocumento = $(window).width();
//console.log(altoDocumento);
//console.log(anchoDocumento);
var centroXDocumento = anchoDocumento / 2;
var centroYDocumento = altoDocumento / 2;
//console.log(centroXDocumemnto,centroYDocumento);
var altoElemento = $(elemento).outerHeight(true);//ancho real del elemento
var anchoElemento = $(elemento).outerWidth(true);//alto
var centroXElemento = anchoElemento / 2;// centro x del elemento
var centroYElemento = altoElemento / 2; // centro y del elemento
var posicionXElemento = centroXDocumento - centroXElemento;
var posicionYElemento = centroYDocumento - centroYElemento;
$(elemento).css("position","absolute");
$(elemento).css("top", posicionYElemento);
$(elemento).css("left", posicionXElemento);
}
});
html
<div id="midiv"></div>
Примечание: вы должны выполнить функцию onDomReady и при изменении размера окна.
здесь находится jsfiddle http://jsfiddle.net/geomorillo/v82x6/
Рабочее решение.
<html>
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
Center aligned text.(horizontal and vertical side)
</body>
</html>