질문자 :Burak Erdem
CSS를 사용 div 를 가운데에 맞추고 싶습니다. 나는 테이블이나 JavaScript를 원하지 않고 순수한 CSS만 원합니다. 몇 가지 솔루션을 찾았지만 모두 Internet Explorer 6 지원이 누락되었습니다.
<body> <div>Div to be aligned vertically</div> </body> Internet Explorer 6을 포함한 모든 주요 브라우저에서 div 세로로 가운데에 맞추려면 어떻게 해야 합니까?
다음은 고정 너비의 유연한 높이 콘텐츠 상자를 수직 및 수평 중앙에 구축할 수 있는 최고의 만능 솔루션입니다. 최신 버전의 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>유연성을 테스트하기 위해 몇 가지 동적 콘텐츠를 구축했으며 문제가 있는 사람이 있는지 알고 싶습니다. 라이트박스, 팝업 등 중앙 오버레이에서도 잘 작동해야 합니다.
목록에서 볼 수 없는 또 하나:
.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; }height 를 선언해야 합니다( 가변 높이 참조).overflow: auto 콘텐츠 스필오버를 방지하기 위한 자동(오버플로 참조)가장 간단한 방법은 다음 세 줄 의 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>이제 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>실제로 수직 센터링에는 두 개의 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>여기 결과 가 있습니다.
2020년 편집: Internet Explorer 8 과 같은 오래된 브라우저를 지원해야 하는 경우에만 사용하세요(거부해야 함). 그렇지 않은 경우 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>지원은 Internet Explorer 8부터 시작됩니다.
많은 연구 끝에 마침내 궁극적인 해결책을 찾았습니다. 부동 요소에 대해서도 작동합니다. 소스보기
.element { position: relative; top: 50%; transform: translateY(-50%); /* or try 50% */ }이를 달성 하려면 CSS Flexbox align-items 속성을 사용하십시오.
html, body { height: 100%; } body { display: flex; align-items: center; } <div>This is centered vertically</div>페이지에서 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>또 다른 옵션은 플렉스 상자를 사용 하고 바이올린 링크를 확인하는 것 입니다.
.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>가장 쉬운 해결책은 다음과 같습니다.
.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>불행히도 — 놀라운 것은 아니지만 — 솔루션은 원하는 것보다 더 복잡합니다. 또한 불행히도 수직으로 가운데에 맞추려는 div 주위에 추가 div를 사용해야 합니다.
Mozilla, Opera, Safari 등과 같은 표준 호환 브라우저의 경우 외부 div가 테이블 로 표시되도록 설정하고 내부 div가 테이블 셀로 표시되도록 설정해야 합니다. 그러면 세로 중앙에 배치될 수 있습니다. Internet Explorer의 경우 내부 div를 외부 div 내에 절대적 으로 배치 한 다음 상단 을 50% 로 지정해야 합니다. 다음 페이지에서는 이 기술을 잘 설명하고 몇 가지 코드 샘플도 제공합니다.
JavaScript를 사용하여 수직 센터링을 수행하는 기술도 있습니다. JavaScript 및 CSS를 사용한 콘텐츠의 수직 정렬이 이를 보여줍니다.
누군가가 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
요소를 세로로 가운데에 flexbox 현대적인 방법은 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> .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>관련: 이미지 가운데 정렬
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>이 바이올린 도 참조하십시오!
CSS의 flex 속성을 사용합니다.
.parent { width: 400px; height:200px; background: blue; display: flex; align-items: center; justify-content:center; } .child { width: 75px; height: 75px; background: yellow; } <div class="parent"> <div class="child"></div> </div> 또는 display: flex; 를 사용하여; 및 margin: auto;
.parent { width: 400px; height:200px; background: blue; display: flex; } .child { width: 75px; height: 75px; background: yellow; margin:auto; } <div class="parent"> <div class="child"></div> </div>텍스트 센터 표시
.parent { width: 400px; height: 200px; background: yellow; display: flex; align-items: center; justify-content:center; } <div class="parent">Center</div>백분율(%) 높이와 너비를 사용합니다.
.parent { position: absolute; height:100%; width:100%; background: blue; display: flex; align-items: center; justify-content:center; } .child { width: 75px; height: 75px; background: yellow; } <div class="parent"> <div class="child"></div> </div>이것은 내가 이 문제로 다시 돌아와야 할 때 항상 가는 곳입니다.
점프를 하고 싶지 않은 사람들을 위해:
position:relative 또는 position:absolute 로 지정합니다.position:absolute 및 top:50% 설정하여 상단을 부모의 가운데로 이동합니다.코드의 예:
<style type="text/css"> #myoutercontainer {position:relative} #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em} </style> ... <div id="myoutercontainer"> <div id="myinnercontainer"> <p>Hey look! I'm vertically centered!</p> <p>How sweet is this?!</p> </div> </div>방금 이 CSS를 작성했으며 자세한 내용을 보려면 다음을 참조하십시오. CSS의 3줄로 모든 항목을 수직 정렬하는 이 기사
.element { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); }신규 이민자의 경우 다음을 시도하십시오.
display: flex; align-items: center; justify-content: center;transform 사용하는 세 줄의 코드는 최신 브라우저와 Internet Explorer에서 실제로 작동합니다.
.element{ position: relative; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }이 답변의 이전 버전에서 일부 불완전성을 발견했기 때문에 이 답변을 추가하고 있습니다(Stack Overflow에서는 단순히 댓글을 달 수 없습니다).
'position' 상대는 현재 div가 본문에 있고 컨테이너 div가 없는 경우 스타일을 엉망으로 만듭니다. 그러나 '고정'이 작동하는 것처럼 보이지만 분명히 뷰포트 중앙의 콘텐츠를 수정합니다.
또한 일부 오버레이 div를 중앙에 배치하기 위해 이 스타일을 사용했으며 Mozilla에서 이 변환된 div 내부의 모든 요소가 아래쪽 테두리를 잃어버린 것을 발견했습니다. 렌더링 문제일 수 있습니다. 그러나 그들 중 일부에 최소한의 패딩만 추가하면 올바르게 렌더링됩니다. Chrome 및 Internet Explorer(놀랍게도)는 패딩 없이 상자를 렌더링했습니다. 
body, html { margin: 0; } body { display: grid; min-height: 100vh; align-items: center; } <div>Div to be aligned vertically</div>.inner div의 고정 너비에서만 작동합니다. text-align: center 속성을 .outer div에 추가하여 동적 너비에서 작동합니다.
.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>그냥 하세요: div 클래스를 추가하세요.
.modal { margin: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 240px; } 그리고 설명을 위해 이 기사 를 읽으십시오. 참고: Height 가 필요합니다.
브라우저 호환성에 대한 답변이 아니라 새로운 Grid 및 그다지 새로운 Flexbox 기능이 아닙니다.
그리드
출처: Mozilla - 그리드 문서 - 수직으로 Div 정렬
브라우저 지원: 그리드 브라우저 지원
CSS:
.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-template-areas: ". aa ." ". aa ."; } .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;나는 이것을 (너비, 높이, 여백 상단 및 여백 왼쪽 변경) 이렇게 했습니다.
.wrapper { width: 960px; height: 590px; position: absolute; top: 50%; left: 50%; margin-top: -295px; margin-left: -480px; } <div class="wrapper"> -- Content -- </div>Flexbox를 사용하지 않고 모든 브라우저를 위한 확실한 솔루션이라고 생각합니다 - "align-items: center;" display: table과 vertical-align: middle;의 조합입니다.
.vertically-center { display: table; width: 100%; /* Optional */ height: 100%; /* Optional */ } .vertically-center > div { display: table-cell; vertical-align: middle; } <div class="vertically-center"> <div> <div style="border: 1px solid black;">some text</div> </div> </div>두 가지 방법으로 할 수 있습니다
body{ left: 50%; top:50%; transform: translate(-50%, -50%); height: 100%; width: 100%; }또는
플렉스 사용
body { height:100% width:100% display: flex; justify-content: center; align-items: center; } align-items:center; 콘텐츠를 세로 중앙으로 만듭니다.
justify-content: center; 콘텐츠를 가로 중앙에 배치
특히 상대(알 수 없는) 높이를 가진 상위 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>.center{ display: grid; place-items: center; }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; }출처 : http:www.stackoverflow.com/questions/396145/how-can-i-vertically-center-a-div-element-for-all-browsers-using-css
| 잠재적으로 위험한 Request.Form 값이 클라이언트에서 감지되었습니다. (0) | 2022.02.27 |
|---|---|
| Git 푸시를 올바르게 강제하려면 어떻게 해야 합니까? (0) | 2022.02.27 |
| Android Studio에서 'assets' 폴더를 어디에 배치해야 하나요? (0) | 2022.02.27 |
| 바이트 배열을 16진수 문자열로 또는 그 반대로 어떻게 변환합니까? (0) | 2022.02.27 |
| Docker 컨테이너의 셸에 어떻게 들어가나요? (0) | 2022.02.27 |