Как центрировать элемент в середине окна браузера? - PullRequest
Новая
       19

Как центрировать элемент в середине окна браузера?

55 голосов
/ 11 июня 2009

Как я могу поместить какой-нибудь элемент HTML (например, <div>) в середину окна браузера (не страницы, не экрана)? Не зависит от размера окна браузера, разрешения экрана, расположения панели инструментов и т. Д. Например. Я хочу, чтобы он был в середине окна браузера .

Ответы [ 18 ]

37 голосов
/ 11 июня 2009

Для этого вам нужно знать размер элемента, который вы центрируете. Подойдет любое измерение (то есть px, em, процент), но оно должно иметь фиксированный размер.

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. Но в любом случае этого может быть достаточно, поскольку вы, вероятно, хотите отобразить всплывающее / модальное поле?

15 голосов
/ 24 июня 2015 
div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
11 голосов
/ 11 июня 2009

Это полностью возможно только с помощью 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>
11 голосов
/ 10 мая 2012

Вот это:

  • Решение только для HTML + CSS - JavaScript не требуется
  • Не требуется, чтобы вы знали размер контента заранее
  • Контент стоит в центре при изменении размера окна

И пример: 

<!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

Вы можете делать что угодно с этим кодом. Единственное условие - любая производная работа должна иметь ссылку на оригинального автора.

11 голосов
/ 13 июня 2009

Я удивился, что никто не сказал о позиции = исправлено. Это делает именно то, что я спросил, и работает во всех «человеческих» браузерах и IE начиная с 7.

7 голосов
/ 14 апреля 2015

Если вы не знаете размер браузера, вы можете просто центрировать в 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;
 }

Это также помогает при любых непредвиденных изменениях в будущем.

4 голосов
/ 08 сентября 2013

У меня было много проблем с центрированием и выравниванием, пока я не нашел Flexbox в качестве рекомендации в руководстве.

Полное руководство по 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>

Подробнее см. В статье.

2 голосов
/ 11 июня 2009

Чтобы выровнять div по центру, вы должны применить стиль 

div 
{
    margin: 0 auto;
}
2 голосов
/ 11 июня 2009 
<div align="center">

или 

<div style="margin: 0 auto;">
1 голос
/ 11 июня 2009

Это проверено и работает во всех браузерах. 

<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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...