위치 중심 : 고정 요소

439

position: fixed;동적 너비와 높이로 화면 중앙에 팝업 상자 를 만들고 싶습니다 . 나는 margin: 5% auto;이것을 위해 사용 했다. position: fixed;그것이 없으면 수평으로 잘 가운데에 위치하지만 수직으로는 아닙니다. 를 추가 한 position: fixed;후에도 가로로 가운데에 있지 않습니다.

다음은 완전한 세트입니다.

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
스 니펫 확장

CSS로 화면에서이 상자를 가운데에 배치하려면 어떻게합니까?

css  css-position  centering 
— 토성
소스

답변:

606

당신은 기본적으로 설정해야 top하고 left하는 50%사업부의 왼쪽 상단 모서리를 중심으로하는. 또한 설정해야 margin-top하고 margin-left사업부의 높이와 폭의 부정적인 절반 사업부의 중앙쪽으로 중심을 이동 할 수 있습니다.

따라서 <!DOCTYPE html>(표준 모드)를 제공하면 다음을 수행해야합니다.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

당신은 수직 및 IE6 / 7 오래된 브라우저를 중심으로 신경 쓰지 않는 경우 또는, 당신은 대신도 추가 할 수 있습니다 left: 0및 right: 0요소에 데 margin-left와 margin-right의 auto고정 위치 요소는 고정 폭을 갖는 그래서 것을 알고 곳의 왼쪽 오른쪽 오프셋이 시작됩니다. 귀하의 경우 따라서 :

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

다시 말하지만 IE에 관심이 있다면 IE8 +에서만 작동하며 세로가 아닌 가로로만 중심에 위치합니다.

— BalusC
소스
8
나는 css-tricks.com/… 에서 그 트릭을 발견했다 . 그러나 너비와 높이를 변경하면 중심이 움직이지 않습니다. 나중에 높이와 너비를 변경할 때 여백 왼쪽과 위쪽을 변경해야합니다.
— saturngod
2
참고 : 이것은 중간에 물건을 올바르게 배치하지만 불행히도 스크롤 막대를 잃어 버립니다. 고정 된 위치는 뷰포트가 아닌 뷰포트를 기반으로하기 때문에 스크롤해도 뷰포트에 의해 클리핑 된 내용에 도달 할 수 없습니다 페이지. 지금까지 내가 찾은 유일한 해결책은 javascript입니다.
— Groxx
3
Groxx 오버플로 속성을 사용하여 팝업의 div 안에 스크롤 막대를 넣을 수 있다고 생각합니다 .
— David Winiecki
1
또한이 요소의 너비를 알아야합니다.
— Hector Ordonez
2
아 그 경우라면, 물론 브라우저 크기는 동적 일 것입니다. 왜 그것이 그 질문에 있는지 잘 모르겠습니다. 대신 팝업 크기가 동적이어야한다는 것을 생각했습니다. 그것은 저에게있어 변형을 사용하여 메신저입니다 : translate (-50 %, -50 %); IE8을 제외하고는 훌륭하게 작동합니다.
— 밤
324

동적 너비와 높이로 화면 중앙에 팝업 상자를 만들고 싶습니다.

동적 너비를 가진 요소를 가로로 가운데에 맞추는 현대적인 방법은 다음과 같습니다. 모든 최신 브라우저에서 작동합니다. 지원은 여기에서 볼 수 있습니다 .

업데이트 된 예

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

수직 및 수평 센터링의 경우 다음을 사용할 수 있습니다.

업데이트 된 예

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

공급 업체 접두사 속성을 더 추가 할 수도 있습니다 (예 참조).

— 조쉬 크로 지어
소스
1
이 방법을 사용하여 너비가 창 너비보다 큰 고정 위치 이미지를 가로로 가운데에 배치하고 현재 Firefox, Chrome, IE 11 및 Edge 버전에서 잘 작동합니다.
— jelhan 2016 년
1
내 테스트에서 이것은 접두사 뒤에, Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome & Safari, Android 4.4 이상에서 매우 잘 작동합니다. 나에게 유일한 실패는 번역이 발생하지 않은 Android 4.0이었습니다.
— danjah jan
2
@ahnbizcad는 Chrome 61, Safari 11 및 FireFox 65와 같은 데스크톱 브라우저에서 작동하지만 Android 6의 Chrome 61에서는 작동하지 않으며 모든 브라우저에서 허용되는 답변입니다.
— Erik Barke
5
Chrome에서 이미지가 흐려집니다.
— Tomasz P. Szynalski
1
어떻게 든 내 img로 모든 브라우저에서 올바르게 작동하는 접근 방식 만 있습니다. 무리 감사!
— Kugelfisch 2016 년
136

또는 원래 CSS를 추가 left: 0하고 추가 right: 0하면 고정되지 않은 일반 요소와 유사하게 작동하며 일반적인 자동 여백 기술이 작동합니다.

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

DOCTYPEIE에서 올바르게 동작 하려면 유효한 (X) HTML 을 사용해야합니다 (물론 그래야합니다 ..!)

— 윌 프레스콧
소스
2
어떤 의미에서? 부모 요소는 body 요소이며 테두리가 없습니다. 몸에 테두리 속성을 추가하면 (?!), 내가 상상하는 50 % 기술과 마찬가지로 영향을받습니다. 주어진 매개 변수로 제대로 작동하고 모든 브라우저에서 편리하게 확인되었으며 요소의 너비에 의존하지 않는 이점이 있습니다.
— Will 프레스콧
5
내가 한 것은 OP의 예제 HTML에 두 가지 속성과 doctype을 추가하는 것입니다. 그러나 추가 테스트에서 IE7 (또는 compat 모드의 8)이 문제인 것 같습니다 . 설정되어 right있으면 속성 값을 존중하지 않는 것 같습니다 left! ( msdn.microsoft.com/en-us/library/... 노트 그 left와 rightIE7 만이 "부분"지원). OK, 나는 IE7 지원이 중요한 경우이 솔루션이 좋지 않습니다 인정하지만, 좋은 트릭 : 미래를위한 기억
— 윌 프레스콧
7
이것이 정답이어야합니다. 불투명 마스크에 대한 두 개의 고정 된 위치와 모달에 대한 다른 고정 위치가 있습니다. 이것이 화면 중앙에 고정 위치 모달을 중앙에 배치 할 수있는 유일한 방법이었습니다. 누가 생각 했을까?
— Chris Hawkes
3
동의합니다. 동의합니다. 너비에 의존하지 않기 때문에 반응 형 디자인에서도 완벽하게 작동합니다.
— Hector Ordonez
7
일부 CSS는 OP에만 관련이 있기 때문에 대답을 단순화하는 것이 좋습니다. 당신이 필요한 것은 위치 : 고정; 왼쪽 : 0; 오른쪽 : 0; 여백 : 0 자동; .
— Hector Ordonez
23

다음과 같은 컨테이너를 추가하십시오.

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

그런 다음이 div에 상자를 넣으면 작업이 수행됩니다.

— 로물루스 우라 카기 차우이
소스
"텍스트 정렬 : 센터"가 내부 div의 중심을 잡는 데 효과적이지 않았습니다.
— nima
2
이 display: inline-block작업을 수행 하려면 내부 상자가 있어야합니다 . (와 같은 일부 다른 표시 값도 작동 할 수 있습니다 table.)
— Brilliand
위에서 언급 한 CSS에 대한 더 나은 접근 방식은 margin:auto;너비를 width:50%또는에 추가 하고 변경하는 것 width:400px입니다. 내용은 일반 텍스트, 블록 요소 또는 인라인 요소 일 수 있습니다.
— Joshua Burns
20

다음을 추가하십시오.

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
— 단발
소스
1
이 position: fixed질문에는 문제가있는로 작동하지 않습니다 . 내가 틀렸다면 실행 가능한 코드 스 니펫을 포함하도록 답변을 편집하십시오.
— Flimm
1
위치 고정으로 잘 작동합니다.
— Phuhui
1
그것은으로 작동 position: fixed제공 세트는 max-width또는 width요소에.
— Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

내부에는 diffenet 너비, 높이 또는없는 요소가있을 수 있습니다. 모두 중심에 있습니다.

— 프라페 소르
소스
5

이 솔루션에서는 팝업 div의 너비와 높이를 정의하지 않아도됩니다.

http://jsfiddle.net/4Ly4B/33/

그리고 자바 스크립트는 팝업의 크기를 계산하고 절반에서 위쪽으로 빼는 대신 전체 화면을 채우도록 popupContainer의 크기를 조정합니다 ...

(100 % 높이, display : table-cell 사용시 작동하지 않음 (수직으로 가운데에 배치해야 함)) ...

어쨌든 그것은 작동합니다 :)

— 비야 케
소스
4 
left: 0;
right: 0;

IE7에서 작동하지 않았습니다.

로 변경 

left:auto;
right:auto;

작업을 시작했지만 나머지 브라우저에서는 작동을 멈 춥니 다! 아래 IE7 에이 방법을 사용했습니다.

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
— jatinder
소스
전체 솔루션을 포함하도록 답변을 편집 하시겠습니까?
— Flimm
왼쪽과 오른쪽에 자동 여백이 없으면 작동하지 않습니다.
— RoM4iK
2

당신은 기본적으로 다른로 포장 할 수 div와 그 설정 position에를 fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
스 니펫 확장

— 압둘라 드라 샤드
소스
2

I 사용 vw(뷰포트 폭) 및 vh(뷰포트 높이). 뷰포트는 전체 화면입니다. 100vw화면의 총 너비와 100vh총 높이입니다.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
— 아 eem
소스
1

위치를 수정하려면 다음을 사용하십시오.

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
— HeadAndTail
소스
3
게시 된 질문에 솔루션이 효과가있는 이유를 설명하십시오.
— Shekhar Chikara 18
0

하나의 가능한 답변 :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
— 마틴 바히
소스
요소의 너비와 높이를 이미 알고 있어야하지만 작동하는 것 같습니다.
— Flimm
0

중앙에 맞지 않는 수평 요소에는 이것을 사용하십시오.

너비 : calc (너비 : 100 %- 너비는 중심을 벗어난 너비 )

예를 들어 사이드 네비게이션 바가 200px 인 경우 :

width: calc(100% - 200px);
— 로버트 로스
소스
0

나는 단지 이와 같은 것을 사용한다 :

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

대화 상자를 가로 및 세로로 가운데에 배치하고 다른 너비와 높이를 사용하여 다른 화면 해상도에 맞게 미디어 쿼리로 응답 할 수 있습니다.

CSS 사용자 정의 특성 calc()이 지원 되거나 지원되지 않는 브라우저에 대한 지원을 여전히 제공해야하는 경우 옵션 이 아닙니다 (캐니 우스 확인).

— 파비앙 스나와에 르트
소스
0

이것은 나를 위해 최선을 다했습니다.

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
— 플레 피
소스
-13

유일한 해결책은 다음과 같이 align = center 테이블을 사용하는 것입니다.

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

전 세계 사람들이 div를 중심으로하는 것과 같은 근본적인 문제를 해결하기 위해 바보 같은 시간을 낭비하는 것을 믿을 수 없습니다. CSS 솔루션은 모든 브라우저에서 작동하지 않으며 jquery 솔루션은 소프트웨어 계산 솔루션이며 다른 이유로 옵션이 아닙니다.

나는 테이블 사용을 피하기 위해 반복적으로 너무 많은 시간을 낭비했지만 경험상 테이블 싸움을 멈추라 고 말합니다. 센터링 div에 테이블을 사용하십시오. 모든 브라우저에서 항상 작동합니다! 더 이상 걱정하지 마십시오.

— 청
소스
11
이것은 전혀 질문에 대답하지 않습니다. 에 해당하는 비 CSS는 없습니다 position:fixed.
— Brilliand
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.