margin : auto를 사용하여 div를 세로로 정렬

113

따라서을 사용하면 div를 가로로 가운데에 배치 할 수 있습니다 margin:0 auto;. margin:auto auto;작동 해야 한다고 생각하는 방식으로 작동 해야합니까 ? 수직으로도 중앙에 배치합니까?

왜 작동하지 vertical-align:middle;않습니까?

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>
스 니펫 확장

JSFiddle

html  css  centering 
— 절약 자
소스
1
Flexbox와 관련하여 아래 @zpr의 답변을 읽고 구현하는 것이 좋습니다. 오늘부터 꽤 잘 지원되며 CSS가 훨씬 더 깨끗해질 것입니다.
— Govind Rai
if ((new Date ()). getFullYear ()> 2017) useFlexBox = true;
— Brandito 2018

답변:

173

2020 년 8 월 업데이트

아래는 유용한 정보를 위해 여전히 읽을 가치가 있지만, 우리는 현재 Flexbox를 가지고 있었으므로이 답변에 따라 사용 하십시오 .

다음을 사용할 수 없습니다.

vertical-align:middle때문에 그건 하지 블록 수준 요소에 적용

margin-top:auto하고 margin-bottom:auto있기 때문에 자신의 사용 가치는 다음과 같이 계산 것 제로

margin-top:-50%백분율 기반 여백 값은 포함 블록 의 너비 에 상대적으로 계산 되기 때문입니다.

실제로 문서 흐름의 특성과 요소 높이 계산 알고리즘으로 인해 요소를 부모 내부에 세로로 가운데 에 배치하는 데 여백을 사용할 수 없습니다. 수직 여백의 값이 변경 될 때마다 부모 요소 높이 재 계산 (리플 로우)이 트리거되어 원래 요소의 중심이 다시 조정되어 무한 루프가됩니다.

당신이 사용할 수있는:

시나리오에 적합한 이와 같은 몇 가지 해결 방법이 있습니다. 세 요소는 다음과 같이 중첩되어야합니다.

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}
<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div
스 니펫 확장

JSFiddle 은 Browsershot에 따라 잘 작동합니다.

— ov
소스
10
#IE7 이하에서만 해석되는 규칙 접두사를 갖는 해킹입니다. 대신 조건부 주석 등 을 사용하여 IE 특정 스타일 시트 에 이러한 규칙을 포함하는 것이 좋습니다 .
— ov
2
그 이유를 인용하자면, 폭을 기준으로 한 마진 백분율 계산은 매우 놀랍습니다.
— ricosrealm
2
나는 '무한 루프'진술에 대해 의문을 품는다.
— Barun
105
인류는 이미 몇 년 전에 달에 왔고 우리는 여전히이 헛소리를 다루어야합니다. 수직 브라우저, 예수의 일을 정렬
— user151496
3
> = IE9의 시대에, position: absolute; top: 50%; transform: translateY(-50%);(달리 ...도 가능하고 매우 인기가있다 top:50%;margin: - $halfHeight... 당신이 사전에 높이를 알 필요가 없습니다)
— 프랭크 Nocke
112

이 질문은 2012 년에 요청되었고 우리는 플렉스 박스에 대한 브라우저 지원을 먼 길에 왔기 때문에이 대답이 의무적 인 것처럼 느꼈습니다.

당신의 부모 컨테이너의 표시 인 경우 flex, 다음 예 , margin: auto auto(라고도 함 margin: auto) 그것이 관계없이 경우, 수평 및 수직으로 모두의 중심을 작동 inline또는 block요소를.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}
<div id="parent">
    <div id="child">hello world</div>
</div>
스 니펫 확장

뷰포트에 상대적인 크기 조정을 사용하는 이 예제 jfiddle 에서처럼 너비 / 높이를 절대적으로 지정할 필요는 없습니다 .

플렉스 박스에 대한 브라우저 지원은 게시 당시 최고 수준이지만, 많은 브라우저는 여전히이를 지원하지 않거나 공급 업체 접두사가 필요합니다. 업데이트 된 브라우저 지원 정보는 http://caniuse.com/flexbox 를 참조하십시오 .

최신 정보

이 답변은 약간의 관심을 받았기 때문에 컨테이너의 모든 요소를 margin사용 display: flex하고 중앙에 배치하려는 경우 전혀 지정할 필요가 없음을 지적하고 싶습니다.

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}
<div id="parent">
    <div>hello world</div>
</div>
스 니펫 확장

— zpr
소스
4
부모 {디스플레이 : 플렉스; } 자식 {여백 : 자동 0; }은 단순히 훌륭합니다.
— Arek Kostrzeba
OMG 친구, 당신은 록 스타 남자입니다, 젠장 나는 당신을 두 번 이상 upvote 할 수 없습니다!
— PirateApp
적합 콘텐츠 문제와 혼동 될 수있는 경우 좋은 대답입니다. 컨테이너에 flex를 설정하면 콘텐츠 div에 속성을 설정할 필요가 없습니다.
— Eric
1
이것은 2018 년에 작동 할 수있는 가장 좋고 우아한 솔루션입니다. 감사합니다.
— SilverSurfer
이 솔루션을 사용하면 2018 년 5 월 현재 IE 11에서 텍스트가 중간에 세로로 정렬되지 않는다는 점을 추가하고 싶습니다.
— Yefu
62

내가 찾은 최고의 솔루션은 다음과 같습니다. http://jsfiddle.net/yWnZ2/446/ Chrome, Firefox, Safari, IE8-11 및 Edge에서 작동합니다.

당신이 선언 된 경우 height( height: 1em, height: 50%, 등)하거나 브라우저의 높이를 알고 요소의 ( img, svg또는 canvas예를 들어), 당신이 수직 중심에 필요한 모든 이것이다 :

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

당신은 보통을 지정할 수 있습니다 width또는 max-width콘텐츠를 화면 / 용기의 전체 길이를 늘릴하지 않도록.

모달이를 사용하는 경우 당신은 항상 다른 콘텐츠 사용을 중복 뷰포트의 중앙에 원하는 것을 position: fixed;대신 두 요소 position: absolute. http://jsfiddle.net/yWnZ2/445/

더 완전한 글은 다음과 같습니다. http://codepen.io/shshaw/pen/gEiDt

— shshaw
소스
3
이것은 반드시 부모 요소의 중심에 있지는 않습니다. 그래도 페이지 중앙에 원하는 경우 멋진 해킹.
— Joel Mellon
2
position: relative부모에 추가 하기 만하면 요소가 부모 내 중앙에 배치됩니다. 더 많은 것을 읽고 싶다면 Smashing Magazine에 기술에 대해 훨씬 더 큰 글을 올렸
— shshaw
때로는 절대적은 부모 또는 두 사람 (신체 대)에 기반하고 친척은 조부모 또는 증조부모 (부모 대) 일 수 있습니다. 언제 또는 왜 발생하는지 아는 사람들이이 기술을 더 잘 제어 할 수 있습니다. 저는 이러한 문제를 실제로 조사한 적이 없지만 절대에서 상대로 전환하는 것 자체가이 작업을 수행하는 해결책이 아니라는 것을 알고 있습니다. 나는 당신의 기사를 조금 읽었고 절대적이고 상대적인 것처럼 보이며 첫 번째 절대 또는 상대 조상까지 올라갑니다. 맞습니까?
— Joel Mellon
조금 느립니다. 위의 의견을 다시 읽었습니다. 나는 당신이 그것을 추가하라고 말한 것을 보지 못했습니다 parent. 정말 고마워!
— Joel Mellon
1
@commonpike IE8 / 9의 유일한 문제 display: table는 가변 높이 콘텐츠 를 사용 하는 경우 입니다. 그렇지 않으면이 방법이 예상대로 작동합니다. 전체적으로 자세한 내용 은 글 을 읽어보십시오 . 또한 IE8 / 9에서 전체보기 를 테스트하여 문제가 있는지 확인할 수 있어야합니다.
— shshaw
22

편집 : 2020 년, 대신 플렉스 박스를 사용합니다.

원래 답변 :

HTML

<body>
  <div class="centered">
  </div>
</body>

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
— Gal Margalit
소스
IE 8 및 ie의 이전 버전에서는 작동하지 않습니다. 변형 속성은 버전 9.0 이상에서 지원되기 때문에 (접두사 -ms- 사용). (즉, 10은 접두사가 더 이상 필요하지 않습니다).
— DevWL
5
사실, IE8은 신경 쓰지 않습니다
— Gal Margalit 2015 년
그리고 작가는 ☺ 자신의 질문에 대한 HTML5 태그
— 갈 마르 갈 리트에게
9

2012 년의 질문이라는 것을 알고 있지만 가장 쉬운 방법을 찾았고 공유하고 싶었습니다.

HTML :

<div id="parent">
     <div id="child">Content here</div>
</div>

및 CSS :

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}
— 폴라 플렉
소스
7

중앙 에 배치 하려는 div의 높이를 알고있는 경우 해당 높이를 부모 내에 절대 위치시킨 다음 top값을 로 설정할 수 50%있습니다. 그러면 자식 div의 상단이 부모 아래로 50 % 내려갑니다. 즉, 너무 낮습니다. margin-top높이를 절반 으로 설정하여 위로 당깁니다 . 이제 부모의 수직 중간 지점에 앉아 자식 div의 수직 중간 지점이 있습니다.

예: 

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>
스 니펫 확장

http://jsfiddle.net/yWnZ2/2/

— 응회암
소스
1
margin-top요소 높이에 상대적인 %로 설정할 수 없으므로 치수 종속 수정으로 끝납니다
— ov
1
내 대답에서 정확히 말한 것은 무엇입니까? "중심화하려는 div의 높이를 알고 있다면". 그리고 나는 OP가 margin-top.
— tuff
사전 정의 된 요소 높이로 고정되므로 솔루션에 동의하지 않지만 귀하의 의견은 의미가 있습니다. 대답에 반영하고 싶을 수도 있습니다
— ov
3
좋아, 나는 당신이 간과했던 부분을 굵게 표시했습니다. 이제 더 명확 해지기를 바랍니다.
— tuff
1
@ov : 요소의 높이가 고정되지 않은 경우 JS를 사용하여 계산 된 높이를 얻은 다음 그에 따라 음의 상단 여백을 설정할 수 있습니다. 제 생각에는 이것은 수직으로 중앙을 맞추는 가장 좋은 방법입니다.
— daGUY
3

이 두 솔루션에는 두 개의 중첩 요소 만 필요합니다.
첫 번째 - 콘텐츠가 정적 인 경우 상대 및 절대 위치 지정 (수동 중심).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

또는 유동적 인 디자인의 경우 -정확한 콘텐츠 센터 사용을 위해 대신 아래 예 :

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

https://jsfiddle.net/GlupiJas/w3jnjuv0/

콘텐츠가 창 높이의 50 %를 초과 할 경우 '최소 높이'설정이 필요합니다. 모바일 및 태블릿 장치 용 미디어 쿼리를 사용하여이 높이를 조작 할 수도 있습니다. 하지만 반응 형 디자인으로 플레이하는 경우에만 가능합니다.

나는 당신이 더 나아가서 어떤 이유로 필요한 경우 최소 높이 또는 고정 높이를 조작하기 위해 간단한 JavaScript / JQuery 스크립트를 사용할 수 있다고 생각합니다.

둘째 - 콘텐츠가 유동적 인 경우 u는 수직 정렬 및 텍스트 정렬이 중앙에있는 테이블 및 테이블 셀 CSS 속성을 사용할 수도 있습니다.

/*in a wrapper*/  
display:table;

과 

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

완벽하게 작동하고 확장되며, 종종 개체의 너비를 조작하는 그리드 레이아웃 및 미디어 쿼리와 함께 반응 형 웹 디자인 솔루션으로 사용됩니다.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

정확한 콘텐츠 센터링을 위해 테이블 ​​솔루션을 선호하지만, 어떤 경우에는 상대적 절대 위치 지정이 특히 콘텐츠 정렬의 정확한 비율을 유지하지 않으려는 경우 더 나은 작업을 수행합니다.

— DevWL
소스
2 

.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>
스 니펫 확장

— Seetpal 싱
소스
이 솔루션이 어떤 것인지 알려주시겠습니까? 게다가, 나는 바닥에 당신의 "팝업 메시지는"중앙에 있지 참조
— 알렉스
나는 무언가를 놓쳤지만 이제는 div를 세로로 중간에 유지하도록 개선되었습니다. 지금 확인할 수 있습니다.
— Seetpal singh
0

모든 상황에서 트릭을 수행 할 수있는 div를 세로로 가운데에 배치하는 쉬운 방법은 없습니다.

그러나 상황에 따라 여러 가지 방법이 있습니다.

다음은 몇 가지입니다.

  • 부모 요소의 상단 및 하단 패딩을 설정합니다 (예 : padding : 20px 0px 20px 0px).
  • 표 사용, 표 셀의 내용을 세로로 중앙
  • 부모 요소의 상대적 위치와 수직으로 중앙에 배치하려는 div를 절대로 설정하고 top : 50px로 스타일을 지정합니다. 하단 : 50px; 예를 들면

Google에서 "css vertical centering"을 검색 할 수도 있습니다.

— 하수
소스
0

가변 높이, 여백 상단 및 하단 자동

.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}
<div class="black">
<div class="message">
    This is a popup message.
</div>
스 니펫 확장

가변 높이, 여백 상단 및 하단 자동

— user3668456
소스
0

Flexbox 사용 :

HTML :

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS :

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

결과보기

— DanielBlazquez
소스
0 
.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>
— Sudipto Chakraborty
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.