브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?

developer tip

브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?

optionbox 2020. 12. 24. 23:38

브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?

일부 HTML 요소 ( <div>예 :)를 브라우저 창 중앙 (화면이 아닌 페이지)에 배치하려면 어떻게해야합니까? 브라우저 창 크기, 화면 해상도, 도구 모음 레이아웃 등에 의존하지 않습니다. 예를 들어 브라우저 창 중간에 있어야 합니다 .

이렇게하려면 중앙에 배치하는 요소의 크기를 알아야합니다. 모든 측정이 가능하지만 (예 : 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를 사용하는 경우에만 브라우저 창을 중앙에 배치 할 수 있습니다. 그러나 팝업 / 모달 상자를 표시하고 싶기 때문에 어쨌든 충분할 수 있습니다.

div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

이것은 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>

나는 아무도 position = fixed에 대해 말하지 않는다는 것에 놀랐습니다. 그것은 내가 요청한 것을 정확하게 만들고 7 이후 모든 "인간"브라우저와 IE에서 작동합니다.

여기 있습니다 :

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

이 코드로 원하는대로 할 수 있습니다. 유일한 조건은 파생 된 저작물이 원저자에 대한 참조를 가져야한다는 것입니다.

브라우저의 크기를 모르는 경우 다음 코드를 사용하여 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를 추천으로 찾을 때까지 센터링 및 정렬에 많은 문제가있었습니다.

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 align="center">

또는

<div style="margin: 0 auto;">

div를 가운데 정렬하려면 스타일을 적용해야합니다.

div 
{
    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>

이것은 모든 div또는 화면 크기에서 작동 합니다.

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

flex 여기 에 대한 자세한 내용을 참조 하십시오 . 대부분의 브라우저에서 작동 합니다 . 여기에서 호환성 매트릭스를 참조 하세요 .

나는 당신이 그렇게 할 수 있다고 생각하지 않습니다. 문서 중간에있을 수 있지만 도구 모음 레이아웃이나 브라우저 컨트롤의 크기를 모릅니다. 따라서 문서의 중앙에 배치 할 수 있지만 브라우저 창 중앙에는 배치 할 수 없습니다.

If I understand you correct, you want to center the element vertically and horizontally based on the window, not the document. It can be a bit of a pain, but you can use javascript to detect the window size, scroll position, element size, etc. and then position the element in the center of the window (not the document, but the viewable window).

If you want this element to remain in the moddule of the window as you scroll you would need to capture the scroll event and adjust the position.

The code for doing this differs from one browser to the next.

You could write a JavaScript wto find the window height and width and make it to half to find the centre point.

Add you stuff inside a tag, and set the div top and left from the javascript to the centre coordinates you have found using Javascript.

Let me know if you need the code.

Hope this helps. Trick is to use absolute positioning and configure the top and left columns. Of course "dead center" will depend on the size of the object/div you are embedding, so you will need to do some work. For a login window I used the following - it also has some safety with max-width and max-height that may actually be of use to you in your example. Configure the values below to your requirement.

div#wrapper {
    border: 0;
    width: 65%;
    text-align: left;
    position: absolute;
    top:  20%;
    left: 18%;
    height: 50%;
    min-width: 600px;
    max-width: 800px;
}

Working solution.

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

It works for me :).

div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

you can center any object in viewport, here is an example using 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);
}
});

the html

<div id="midiv"></div>

Note: you must execute the function onDomReady and when the window resizes.

here is de jsfiddle http://jsfiddle.net/geomorillo/v82x6/

ReferenceURL : https://stackoverflow.com/questions/982054/how-to-center-an-element-in-the-middle-of-the-browser-window

'developer tip' 카테고리의 다른 글

http.Request에서 클라이언트의 IP 주소를 가져 오는 올바른 방법 (0)	2020.12.25
특정 색상을 생성하기 위해 필요한 색상 회전을 계산하는 방법은 무엇입니까? (0)	2020.12.25
두 파일이 동일한 지 확인하는 가장 빠른 해시 알고리즘은 무엇입니까? (0)	2020.12.24
System.Windows.Controls.SelectedItemCollection을 캐스팅하는 방법? (0)	2020.12.24
aspx 파일에 네임 스페이스를 추가하는 방법은 무엇입니까? (0)	2020.12.24

현재글브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?

optionbox

브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?

브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

티스토리툴바

브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?

브라우저 창 중앙에 요소를 배치하는 방법은 무엇입니까?

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

관련글

티스토리툴바