1367

divCSS를 세로 로 가운데에 맞추고 싶습니다 . 테이블이나 JavaScript는 원하지 않지만 순수한 CSS 만 필요합니다. 일부 솔루션을 찾았지만 모두 Internet Explorer 6 지원이 누락되었습니다.

<body>
    <div>Div to be aligned vertically</div>
</body>

divInternet Explorer 6을 포함한 모든 주요 브라우저에서 세로로 가운데를 맞추는 방법은 무엇입니까?

— 부락 에르 뎀
소스

25

@MarcoDemaio 사람들이 tables여기에 레이아웃을 계속해서 눈살을 찌푸 리지 않습니까?

— Chud37

14

@ Chud37 : 그것은 당신이해야 할 일에 달려 있으며, 레이아웃을위한 테이블은 일반적으로 코드에 입력하기에 다재다능하고 길지 않습니다 .css를 사용하면 2 cols 레이아웃을 3/4/5 sols 레이아웃으로 쉽게 변경할 수 있습니다. 그러나이 경우 완벽한 크로스 브라우저 테이블로 달성 할 수있는 간단한 작업에 수십 개의 CSS 팁과 트릭을 사용하는 것과 다릅니다. 문을 사용하는 대신 창을 통해 집에 들어가는 것과 같습니다.

— Marco Demaio

사람들이 이전 브라우저 지원에 관심이없는 경우 : davidwalsh.name/css-vertical-center

— Karolis Šarapnickis

1

css-vertical-center.com 브라우저 호환성 정보를 몇 가지 해결책이 있습니다

— EscapeNetscape

2

여기가 할 수있는 방법이 많이있다 css-tricks.com/centering-css-complete-guide

— 마이클 Yurin

1374

아래는 고정 너비의 유연한 높이 콘텐츠 상자 를 세로 및 가로로 가운데에 맞추기 위해 구축 할 수있는 최상의 만능 솔루션 입니다. 최신 버전의 Firefox, Opera, Chrome 및 Safari에서 테스트되어 작동했습니다.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

스 니펫 확장

동적 컨텐츠로 실무 예제보기

나는 유연성을 테스트하기 위해 동적 컨텐츠를 내장했으며 누군가가 그것에 대해 어떤 문제가 있는지 알고 싶습니다. 라이트 박스, 팝업 등 중앙 오버레이에도 잘 작동합니다.

— 빌 바드
소스

"절대적인"외부 DIV가 없으면 페이지의 모든 내용이 전체 블록을 아래로 밀어냅니다. 이것은 다른 페이지 내용과 더 독립적입니다.

— Billbad

9

.outer {position:absolute;width:100%;height:100%}필요하지 않습니다, 그들은 단지 시연을 위해 여기에 있습니다. display:table내가 혼란스러워하는 사람이라면 누구나 필요합니다 .

— gfaceless

스크롤 막대를 피하기 위해 99 %가 필요하다는 것을 알았습니다. 더 중요한 것은, 첫 번째 두 개의 div의이 작품은, KEEP 말 .outer과 middle하고 노골적으로 무시 .inner하고 스타일을. 나는 지점이 무엇인지 모르고 margin-left, margin-right그 ?? 수평 요소를 중심으로하지 않기 때문에 자동으로 설정이!

— user10089632

제거 width: 100%;하고 추가 margin: 0 auto하여 .outer가변 너비도 허용합니다.

— rococo

@ user10089632 아니요, 너비 나 높이 문제가 아니라 위치입니다. top: 0; left 0;Chrome에서 기본적으로 1로 설정되어 있습니다.

— Michał Woliński

280

목록에서 볼 수없는 항목이 하나 더 있습니다.

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

크로스 브라우저 (Internet Explorer 8 포함-해킹없는 Internet Explorer 10!)
백분율 및 최소 / 최대-
패딩에 관계없이 중앙에 위치 (박스 크기 조정 제외)
height선언해야합니다 ( 가변 높이 참조 )
overflow: auto콘텐츠 유출을 방지하기위한 권장 설정 (오버플로 참조)

_{출처 : CSS의 절대 수평 및 수직 센터링}

— 이 셀라
소스

7

이것은 나를 위해 일한,하지만 난 어떤 이유로 크롬에서 고정 된 폭과 높이가 필요

— 라이언을 알리다

1

감사합니다. px 높이 또는 너비를 계산할 필요가없는 수정이 필요했으며 이것이 완벽하게 작동했습니다.

— GFoley83

8

훌륭한 솔루션, 특히 부모 div가 필요하지 않기 때문에

— Luca Steeb

1

높이가 고정되어 있지 않은 경우, 그 외에는 스트레칭이 적용됩니다. 멋진 솔루션

— Bart Burg

너비와 높이가 100 %가 아닌 경우margin: auto;

— Charles L을

253

가장 간단한 방법은 다음 세 줄 의 CSS입니다.

1) 위치 : 상대;

2) 상단 : 50 %;

3) 변환 : translateY (-50 %);

다음은 예입니다 .

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

스 니펫 확장

— DrupalFever
소스

4

참고 : 외부 div의 높이가 "최소 높이 : 170px"로 설정된 경우 올바르게 작동하지 않습니다.

— Bart Burg

3

Z- 색인 방해

— ripper234

4

height외부 div가 일 때 작동하지 않습니다 100%. 그런 다음에 만 작동합니다 position: absolute;.

— 아치 리눅스 턱시도

1

나는이 솔루션을 다른 곳에서 처음 발견했지만이 -webkit-transform변형 을 언급 한이 특별한 대답에 대한 추가 조언을 얻었습니다.이 방법을 phantomjs에서 작동시켜야했습니다.

— drmrbrewer

2

이것이 가장 좋은 대답입니다. 이것은 더 이상 사용하지 않는 IE9까지 모든 것에서 가장 적은 양의 기존 작업과 기능으로 혼란 스럽습니다. 이 녀석을 좀 더 공감하게 해줘 요!

— Nick Steele

136

실제로 수직 센터링을 위해서는 두 개의 div가 필요합니다. 내용을 포함하는 div의 너비와 높이가 있어야합니다.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

스 니펫 확장

결과 는 다음과 같습니다

— 바딤 오 친니 코프
소스

4

그것은 오래된 속임수입니다 ... 상위 50 %와 상단 마진은 내부 div의 높이의 절반 절반

— Manatax

34

div의 높이가 고정되어 있다고 가정합니다. div가 높이를 변경할 수 있으면 작동하지 않습니다.

— Andre Figueiredo

116

이제 flexbox 솔루션은 최신 브라우저에서 매우 쉬운 방법이므로 다음과 같이 권장합니다.

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

스 니펫 확장

— 산토스 칼세
소스

1

가 있다면 navbar키를 사용 height: calc(100% - 55px)하거나 키를 사용하여 높이를 조정할 수 있습니다 navbar.

— Adrian

나는 또한 몸에서 여백 / 패딩을 제거해야했다

— Ben

와 잘 작동합니다 float. 감사.

— Amir A. Shabani

이것은 "더 오래된"모바일 사파리 브라우저에서 이상하게 작동 할 것입니다. 높이 대신 권장되는 사용법은 .container 클래스의 flex-basis입니다.

— Nine Magics

78

편집 2020 : IE8과 같은 오래된 브라우저를 지원 해야하는 경우에만 사용하십시오 (반드시 😉). 그렇지 않은 경우 flexbox를 사용하십시오.

이것은 내가 찾은 가장 간단한 방법이며 항상 사용합니다 ( jsFiddle 데모 여기 )

이 기사에 대해 CSS Tricks의 Chris Coyier에게 감사한다 .

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

스 니펫 확장

IE8부터 지원이 시작됩니다.

— 아르 멜 라르 시어
소스

구식 브라우저에 대한 지원을 거부하면서 솔루션은 flexbox가 아니라 그리드 시스템이었습니다. 컨테이너의 중앙 내용이 너무 작아서 높이가 너무 작아지면 스크롤 막대를 표시해야했고 중앙 내용이 다른 모든 방법으로 스크롤 영역을 잃어 버렸습니다. 컨테이너에서 나는 다음을 사용합니다 : {display : grid; 정렬 항목 : 중심; } 이것이 누군가를 돕기를 바랍니다.

— tomasofen

63

많은 연구 끝에 마침내 최고의 솔루션을 찾았습니다. 부동 요소에서도 작동합니다. 소스보기

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

— ymakux
소스

4

컨테이너 요소가 암시 적이거나 명시적인 높이를 가져야한다는 것을 기억한다면 이것은 실제로 잘 작동합니다. jsfiddle.net/14kt53un CSS를 처음 접하는 사람들에게 작은 도움이됩니다.

— Martyn Shutt

6

모든 답변 중에서 가장 간단합니다! 다른 사람들도 당신의 대답을보기를 바랍니다! 감사합니다! 그건 그렇고, 50%나를 위해 일했습니다 (아닙니다 -50%)

— The Codesee

그것은 믿어지지 않았다. 몇 시간 동안 검색 한 후에이 것이 나를 위해 일했습니다. translateY (50 %)를 사용해야했는데 이유가 확실하지만 효과가있었습니다. 필자의 경우 부모는 AEM Forms Engine에 의해 생성되었으며 특정 자식 요소 만 제어 할 수 있습니다.

— tarekahf

41

Flexbox 솔루션

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

스 니펫 확장

— 레지 핑크 햄
소스

3

참고 justify-content: center수평뿐만 아니라 항목을 중심합니다

— 피터 버그에게

36

div를 페이지 중앙에 배치하려면 바이올린 링크를 확인하십시오 .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

스 니펫 확장

또 다른 옵션은 flex box를 사용하는 것 입니다. 바이올린 링크를 확인하십시오 .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

스 니펫 확장

또 다른 옵션은 CSS 3 변환을 사용하는 것입니다.

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

스 니펫 확장

— 얼간이
소스

3

@ArmelLarcier 잘못되었습니다. 상대 단위는 백분율 %, ems 및 rems입니다. 절대 또는 고정 값은 픽셀 또는 포인트입니다. 당신이 말하는 것은 "그것은 선언 된 높이에서만 작동합니다"입니다. 그러나 Moes가 설명하는이 방법에는 높이가 필요하지만 상대 단위로 선언 할 때 중앙 DIV 내부의 컨텐츠 양에 관계없이 DIV가 컨텐츠에 맞게 수직으로 확장되는 비율이 가장 좋습니다. 이것이이 방법의 아름다움입니다. 또 다른 좋은 점은 누군가이 브라우저를 계속 지원 해야하는 경우이 방법이 IE8 / 9 / 10에서 작동한다는 것입니다.

— Ricardo Zea

@ricardozea 완고한 게임을 의미하는 것은 아니지만 가운데 div가 세로로 확장되는 동안 세로로 가운데에 머무르는 것은 잘못된 것입니다. 시도 해봐. 나는 높이가 "고정"되어야한다고 말할 때 그것이 올바른 단어가 아니라는 것을 안다. 그것은 실제로 부모와 관련이 있습니다. 어쨌든 Chris Coyer의 방법이 더 합리적이라고 생각합니다. 내 대답을 참조하십시오 stackoverflow.com/a/21919578/1491212 IE8과 호환되며 지정된 크기가없는 요소에서 작동합니다.

— Armel Larcier

1

@ArmelLarcier 그것은 모두 좋다. 오빠가 아닙니다. 그것을보십시오 : codepen.io/shshaw/pen/gEiDt- 녹색 상자에 단락 추가;]. 물론 Modernizr을 사용하여 효과를 달성 할 수 있지만, 모든 것이 가능합니다. 귀하의 답변과 CSS-Tricks.com 게시물도 보았지만 그 방법으로 인해 행복하지 않으며 추가 마크 업을 사용하고 CSS가 너무 장황합니다. 가장 좋은 해결책은 flexbox 또는 transform: translate(-50%, -50%);기술을 사용하는 것입니다. IE8의 경우 상단 / 중앙을 맞추고 계속 진행하십시오.

— Ricardo Zea

1

@ricardozea 글쎄, 당신이 연결 한 코드 펜은 "display : table"메소드와 여분의 마크 업을 사용하므로 놀라지 않습니다. 어쨌든 마지막 문장에 +1하십시오.

— Armel Larcier

23

가장 쉬운 해결책은 다음과 같습니다.

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

스 니펫 확장

— 바르샤 닷지
소스

2

실제로 가장 쉬운 방법 :) 비록 스타일을 body 대신 outer-div로 설정해야했습니다.

— baburao

21

불행히도 놀랍지는 않지만 솔루션은 원하는 것보다 더 복잡합니다. 또한 불행히도 세로로 중앙에 배치하려는 div 주위에 추가 div를 사용해야합니다.

Mozilla, Opera, Safari 등과 같은 표준 호환 브라우저의 경우 외부 div를 테이블 로 표시 하고 내부 div를 테이블 셀로 표시 하도록 설정해야합니다 . 그러면 수직 중심에 놓일 수 있습니다. Internet Explorer의 경우 내부 div를 외부 div 내에 절대로 배치 한 다음 상단 을 50 % 로 지정해야합니다 . 다음 페이지는이 기술을 잘 설명하고 일부 코드 샘플도 제공합니다.

CSS에서 수직 센터링
~~알 수없는 높이 (Internet Explorer 7 호환)의 CSS에서 세로 중심 맞춤~~ (더 이상 사용되지 않음)
높이를 알 수없는 CSS의 세로 중심 맞춤 (Internet Explorer 7 호환) (Wayback Machine 제공 기사)

JavaScript를 사용하여 수직 센터링을 수행하는 기술도 있습니다. JavaScript 및 CSS를 사용한 컨텐츠의 수직 정렬이 이를 보여줍니다.

— sids
소스

20

누군가 Internet Explorer 10 이상에만 관심이있는 경우 flexbox다음을 사용하십시오 .

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}

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

스 니펫 확장

Flexbox 지원 : http://caniuse.com/flexbox

— 용감한
소스

안드로이드 <4.4는 지원하지 않습니다 align-items: center;!

— André Fiedler

실제로는 정렬 항목을 지원합니다. center; caniuse.com/#search=align-items

— t.mikael.d 2012 년

@ t.mikael.d 해당 테이블을 자세히 살펴보고 싶을 수도 있습니다. Android <4.4의 경우 "이전 flexbox 사양 만 지원하고 랩핑은 지원하지 않습니다."라고 표시됩니다.

— Nathan Osman

15

요소를 세로로 가운데에 배치하는 현대적인 방법은을 사용하는 것 flexbox입니다.

키를 결정하려면 부모가 필요하고 아이를 가운데에 놓아야합니다.

아래 예제는 브라우저 내에서 div를 가운데에 배치합니다. 어떻게 (내 예제에서) 중요한 것은 설정하는 것입니다 height: 100%로 body하고 html다음 min-height: 100%컨테이너에.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

스 니펫 확장

— 마웰
소스

14

수직으로 만 중심

Internet Explorer 6 및 7에 신경 쓰지 않으면 두 개의 컨테이너가 포함 된 기술을 사용할 수 있습니다.

외부 용기 :

있어야한다 display: table;

내부 용기 :

있어야한다 display: table-cell;
있어야한다 vertical-align: middle;

내용 상자 :

있어야한다 display: inline-block;

너비 나 높이를 신경 쓰지 않고 원하는 내용을 내용 상자에 추가 할 수 있습니다!

데모:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

스 니펫 확장

이 바이올린을 참조하십시오 !

수평 및 수직 중심

수평 및 수직으로 중앙에 배치하려면 다음 사항도 필요합니다.

내부 용기 :

있어야한다 text-align: center;

내용 상자 :

텍스트를 중앙에 배치하지 않으려면 가로 텍스트 정렬을 예를 들어 text-align: left;또는로 다시 조정해야합니다.text-align: right;

데모:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

스 니펫 확장

이 바이올린을 참조하십시오 !

— 존 스레 거스
소스

13

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

스 니펫 확장

CSS 그리드

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

스 니펫 확장

— 앤디 호프만
소스

5

새로운 사람들을 위해 시도하십시오

display: flex;
align-items: center;
justify-content: center;

— Usman I
소스

1

이 CSS 코드가 어떻게 수직 정렬 되는지 보여주는 스택 스 니펫 을 추가하십시오 . div

— Heretic Monkey

이것도 작동합니다 <div style="display:flex"><div style="margin:auto">Inner</div></div>

— idrisadetunmbi

나는 항목을 정렬하고 내용을 정당화하는이 훌륭한 설명을 접했습니다. 필독 : stackoverflow.com/questions/42613359/…

— Usman I

4

Billbad의 답변은 고정 너비의 .innerdiv 에서만 작동합니다 . 이 솔루션은 속성 text-align: center을 .outerdiv 에 추가하여 동적 너비에 적합합니다 .

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

스 니펫 확장

— 루웬
소스

흥미 롭습니다! 나는 거의 동일한 기술을 사용하고 있습니다! -> stackoverflow.com/questions/396145/…

— John Slegers

4

사용하는 세 줄의 코드 transform는 최신 브라우저와 Internet Explorer에서 실제로 작동합니다.

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

이 답변의 이전 버전에서 일부 불완전 성을 발견했기 때문에이 답변을 추가하고 있습니다 (스택 오버플로는 단순히 주석을 달 수 없습니다).

'position'relative는 현재 div가 본문에 있고 컨테이너 div가없는 경우 스타일을 엉망으로 만듭니다. 그러나 '고정'은 작동하는 것처럼 보이지만 분명히 뷰포트 중앙의 내용을 수정합니다.
또한이 스타일을 사용하여 일부 오버레이 div를 중심에 배치했으며 Mozilla 에서이 변환 된 div 내부의 모든 요소가 아래쪽 테두리를 잃어 버렸다는 것을 알았습니다. 렌더링 문제 일 수 있습니다. 그러나 그들 중 일부에 최소한의 패딩을 추가하면 올바르게 렌더링되었습니다. Chrome과 Internet Explorer는 (놀랍게도) 패딩없이 상자를 렌더링했습니다.

— 만다 르크
소스

3

다음 링크는 CSS에서 단 3 줄로 간단한 방법을 보여줍니다.

3 줄의 CSS로 무엇이든 세로로 정렬 할 수 있습니다.

크레디트 : Sebastian Ekström .

나는 그 질문에 이미 답이 있다는 것을 알고 있지만 단순성을 위해 링크에서 유틸리티를 보았습니다.

— 히 카로
소스

3

브라우저 호환성에 대한 대답은 아니지만 새로운 Grid와 그렇지 않은 Flexbox 기능에 대해서도 언급합니다.

그리드

보낸 사람 : Mozilla-그리드 문서-Div를 세로로 정렬

브라우저 지원 : 그리드 브라우저 지원

CSS :

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML :

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

플렉스 박스

브라우저 지원 : Flexbox 브라우저 지원

CSS :

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

— tek
소스

3

flexbox를 사용하지 않고 모든 브라우저에 적합한 솔루션이라고 생각합니다- "align-items : center;" display : table 및 vertical-align : middle;의 조합입니다.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣ 데모 : https://jsfiddle.net/6m640rpp/

— 마틴 원케
소스

2

나는 이것을 사용하여 (너비, 높이, 여백 상단 및 여백 왼쪽 변경) :

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

— 네 더키
소스

DIV의 너비 / 높이를 가운데에 맞추려는 경우에만 좋습니다. 이것은 질문이 아니다

— egr103

2

flexbox를 사용하여 내용을 쉽게 가운데에 맞출 수 있습니다. 다음 코드는 내용을 가운데에 배치해야하는 컨테이너의 CSS를 보여줍니다.

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

— 마헤 인 리야
소스

2

특히 상대 (알 수없는) 높이를 가진 부모 div의 경우 알 수없는 솔루션 의 중심이 나에게 효과적입니다. 이 기사에는 정말 멋진 코드 예제가 있습니다.

Chrome, Firefox, Opera 및 Internet Explorer에서 테스트되었습니다.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

스 니펫 확장

— 루웬
소스

2

그냥해라 :에 수업을 추가하십시오 div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

설명을 위해이 기사 를 읽으십시오 . 참고 : Height필요합니다.

— 안슐
소스

2

내가 최근에 알아 낸 트릭 top 50%이 있습니다.translateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

스 니펫 확장

— 멜 키아
소스

모든 브라우저에서 div를 세로로 가운데에 배치하는 방법은 무엇입니까?

Flexbox 솔루션

수직으로 만 중심

외부 용기 :

내부 용기 :

내용 상자 :

데모:

수평 및 수직 중심

내부 용기 :

내용 상자 :

데모:

CSS 그리드

CSS

HTML