No error , No gain

Question 1

CSS를 사용하여 다른 <div> <div> 수평으로 중앙에 맞추려면 어떻게 해야 합니까?

 <div id="outer"> <div id="inner">Foo foo</div> </div>

Question 2

이 CSS를 내부 <div> 적용할 수 있습니다.

 #inner { width: 50%; margin: 0 auto; }

width 를 50% 로 설정할 필요는 없습니다. <div> 보다 작은 너비가 작동합니다. margin: 0 auto 는 실제 센터링을 수행하는 것입니다.

Internet Explorer 8 (이상)을 대상으로 하는 경우 대신 다음을 사용하는 것이 좋습니다.

 #inner { display: table; margin: 0 auto; }

내부 요소를 가로로 가운데로 만들고 특정 width 를 설정하지 않고 작동합니다.

여기에서 작동하는 예:

 #inner { display: table; margin: 0 auto; border: 1px solid black; } #outer { border: 1px solid red; width:100% }

 <div id="outer"> <div id="inner">Foo foo</div> </div>

편집하다

flexbox 사용하면 div의 스타일을 가로 및 세로 가운데에 매우 쉽게 지정할 수 있습니다.

 #inner { border: 1px solid black; } #outer { border: 1px solid red; width:100%; display: flex; justify-content: center; }

 <div id="outer"> <div id="inner">Foo foo</div> </div>

div를 세로 가운데 정렬하려면 align align-items: center 속성을 사용하십시오.

Question 3

div 에 고정 너비를 설정하지 않으려면 다음과 같이 할 수 있습니다.

 #outer { width: 100%; text-align: center; } #inner { display: inline-block; }

 <div id="outer"> <div id="inner">Foo foo</div> </div>

이는 내부 div text-align 으로 가운데에 맞출 수 있는 인라인 요소로 만듭니다.

Question 4

가장 좋은 방법은 CSS 3을 사용하는 것 입니다.

상자 모델:

 #outer { width: 100%; /* Firefox */ display: -moz-box; -moz-box-pack: center; -moz-box-align: center; /* Safari and Chrome */ display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; /* W3C */ display: box; box-pack: center; box-align: center; } #inner { width: 50%; }

 <div id="outer"> <div id="inner">Foo foo</div> </div>

사용성에 따라 box-orient, box-flex, box-direction 속성을 사용할 수도 있습니다.

플렉스 :

 #outer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }

자식 요소의 중앙 정렬에 대해 자세히 알아보기

그리고 이것은 상자 모델이 최고의 접근 방식인 이유를 설명합니다 .

W3C 박스 모델이 더 나은 것으로 간주되는 이유는 무엇입니까?

Question 5

div의 너비가 200픽셀이라고 가정합니다.

 .centered { position: absolute; left: 50%; margin-left: -100px; }

상위 요소가 위치 (즉, 상대, 고정, 절대 또는 고정)에 있는지 확인합니다.

div의 너비를 모르는 경우 transform:translateX(-50%); 음수 마진 대신.

https://jsfiddle.net/gjvfxxdj/

CSS calc() 를 사용하면 코드가 훨씬 더 간단해질 수 있습니다.

 .centered { width: 200px; position: absolute; left: calc(50% - 100px); }

원칙은 여전히 동일합니다. 항목을 중간에 놓고 너비를 보정하십시오.

Question 6

수직 및 수평 align 방법을 보여주기 위해 이 예제 를 만들었습니다.

코드는 기본적으로 다음과 같습니다.

 #outer { position: relative; }

그리고...

 #inner { margin: auto; position: absolute; left:0; right: 0; top: 0; bottom: 0; }

그리고 화면 크기 center 유지됩니다.

Question 7

display:box 사용하여 중앙에 배치하는 CSS 3 방법을 언급했습니다.

이 구문은 구식이며 더 이상 사용해서는 안 됩니다. [이 게시물 도 참조] .

따라서 여기에서는 완전성을 위해 Flexible Box Layout Module을 사용하여 CSS 3을 중앙에 배치하는 최신 방법을 소개합니다.

따라서 다음과 같은 간단한 마크업이 있는 경우:

 <div class="box"> <div class="item1">A</div> <div class="item2">B</div> <div class="item3">C</div> </div>

...항목을 상자 안에 가운데에 맞추려면 상위 요소(.box)에 필요한 항목이 있습니다.

 .box { display: flex; flex-wrap: wrap; /* Optional. only if you want the items to wrap */ justify-content: center; /* For horizontal alignment */ align-items: center; /* For vertical alignment */ }

 .box { display: flex; flex-wrap: wrap; /* Optional. only if you want the items to wrap */ justify-content: center; /* For horizontal alignment */ align-items: center; /* For vertical alignment */ } * { margin: 0; padding: 0; } html, body { height: 100%; } .box { height: 200px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 2px solid tomato; } .box div { margin: 0 10px; width: 100px; } .item1 { height: 50px; background: pink; } .item2 { background: brown; height: 100px; } .item3 { height: 150px; background: orange; }

 <div class="box"> <div class="item1">A</div> <div class="item2">B</div> <div class="item3">C</div> </div>

flexbox에 대해 이전 구문을 사용하는 이전 브라우저를 지원해야 하는 경우 여기 를 참조하세요.

Question 8

고정 너비를 설정하고 추가 여백을 원하지 않는 경우 요소에 display: inline-block

당신이 사용할 수있는:

 #element { display: table; margin: 0 auto; }

Question 9

알 수 없는 높이와 너비의 div 중앙에 맞추기

수평 및 수직. 합리적으로 최신 브라우저(Firefox, Safari/WebKit, Chrome, Internet & Explorer & 10, Opera 등)에서 작동합니다.

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

 <div class="content">This works with any content</div>

Codepen 또는 JSBin 에서 추가로 수정하십시오 .

Question 10

width 를 설정하고 margin-left 및 margin-right 를 auto 합니다. 그것은 수평에만 해당됩니다 . 두 가지 방법을 모두 원하면 두 가지 방법으로만 하면 됩니다. 실험을 두려워하지 마십시오. 그것은 당신이 아무것도 부수는 것과 같지 않습니다.

Question 11

너비를 지정하지 않으면 가운데에 맞출 수 없습니다. 그렇지 않으면 기본적으로 전체 수평 공간을 차지합니다.

Question 12

CSS 3의 box-align 속성

 #outer { width: 100%; height: 100%; display: box; box-orient: horizontal; box-pack: center; box-align: center; }

Question 13

나는 최근에 페이지 중앙에 있어야 하는 표 형식이 있는 "숨겨진" div(즉, display:none; 다음 jQuery 코드를 작성하여 숨겨진 div를 표시한 다음 CSS 콘텐츠를 테이블의 자동 생성 너비로 업데이트하고 여백을 가운데로 변경했습니다. (디스플레이 토글은 링크를 클릭하면 트리거되지만 이 코드는 표시할 필요가 없습니다.)

참고: 이 코드를 공유하는 이유는 Google에서 이 스택 오버플로 솔루션을 소개했고 숨겨진 요소에 너비가 없고 표시될 때까지 크기를 조정/중앙에 맞출 수 없다는 점을 제외하고 모든 것이 작동했을 것이기 때문입니다.

 $(function(){ $('#inner').show().width($('#innerTable').width()).css('margin','0 auto'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="inner" style="display:none;"> <form action=""> <table id="innerTable"> <tr><td>Name:</td><td><input type="text"></td></tr> <tr><td>Email:</td><td><input type="text"></td></tr> <tr><td>Email:</td><td><input type="submit"></td></tr> </table> </form> </div>

Question 14

내가 일반적으로하는 방법은 절대 위치를 사용하는 것입니다.

 #inner{ left: 0; right: 0; margin-left: auto; margin-right: auto; position: absolute; }

외부 div가 작동하기 위해 추가 속성이 필요하지 않습니다.

Question 15

Firefox 및 Chrome:

 <div style="width:100%;"> <div style="width: 50%; margin: 0px auto;">Text</div> </div>

Internet Explorer, Firefox 및 Chrome의 경우:

 <div style="width:100%; text-align:center;"> <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div> </div>

text-align: 속성은 최신 브라우저의 경우 선택 사항이지만 레거시 브라우저 지원을 위해 Internet Explorer 쿼크 모드에서는 필수입니다.

Question 16

사용하다:

 #outerDiv { width: 500px; } #innerDiv { width: 200px; margin: 0 auto; }

 <div id="outerDiv"> <div id="innerDiv">Inner Content</div> </div>

Question 17

요소 중 하나의 너비를 설정하지 않고 이에 대한 또 다른 솔루션은 CSS 3 transform 속성을 사용하는 것입니다.

 #outer { position: relative; } #inner { position: absolute; left: 50%; transform: translateX(-50%); }

트릭은 translateX(-50%) #inner 요소를 자체 너비의 50% 왼쪽으로 설정한다는 것입니다. 수직 정렬에 동일한 트릭을 사용할 수 있습니다.

다음은 수평 및 수직 정렬을 보여주는 Fiddle입니다.

자세한 정보는 Mozilla 개발자 네트워크에 있습니다.

Question 18

자신의 블로그에 'Centering in the Unknown'에 대한 훌륭한 게시물 을 작성한 Chris Coyier입니다. 여러 솔루션의 요약입니다. 이 질문에 게시되지 않은 것을 게시했습니다. Flexbox 솔루션보다 더 많은 브라우저 지원이 있으며 display: table; 다른 것들을 깨뜨릴 수 있습니다.

 /* This parent can be any width and height */ .outer { text-align: center; } /* The ghost, nudged to maintain perfect centering */ .outer:before { content: '.'; display: inline-block; height: 100%; vertical-align: middle; width: 0; overflow: hidden; } /* The element to be centered, can also be of any width and height */ .inner { display: inline-block; vertical-align: middle; width: 300px; }

Question 19

나는 최근에 다음과 같은 접근 방식을 찾았습니다.

 #outer { position: absolute; left: 50%; } #inner { position: relative; left: -50%; }

올바르게 작동하려면 두 요소의 너비가 같아야 합니다.

Question 20

예를 들어 이 링크 와 아래 스니펫을 참조하세요.

 div#outer { height: 120px; background-color: red; } div#inner { width: 50%; height: 100%; background-color: green; margin: 0 auto; text-align: center; /* For text alignment to center horizontally. */ line-height: 120px; /* For text alignment to center vertically. */ }

 <div id="outer" style="width:100%;"> <div id="inner">Foo foo</div> </div>

부모 아래에 많은 자식이 있는 경우 CSS 콘텐츠는 fiddle 의 이 예제와 같아야 합니다.

HTML 콘텐츠는 다음과 같습니다.

 <div id="outer" style="width:100%;"> <div class="inner"> Foo Text </div> <div class="inner"> Foo Text </div> <div class="inner"> Foo Text </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> Foo Text </div> </div>

그런 다음 fiddle 에서 이 예제를 참조하십시오.

Question 21

수평으로만 센터링

내 경험에 따르면 상자를 가로로 가운데에 맞추는 가장 좋은 방법은 다음 속성을 적용하는 것입니다.

컨테이너:

text-align: center; 가 있어야 합니다.

내용 상자:

display: inline-block;

데모:

 .container { width: 100%; height: 120px; background: #CCC; text-align: center; } .centered-content { display: inline-block; background: #FFF; padding: 20px; border: 1px solid #000; }

 <div class="container"> <div class="centered-content"> Center this! </div> </div>

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

수평 및 수직 센터링

내 경험에 의하면, 세로 및 가로 방향 상자를 중심으로하는 가장 좋은 방법은 별도의 컨테이너를 사용하여 다음과 같은 속성을 적용하는 것입니다 :

외부 용기:

디스플레이가 있어야 display: table;

내부 용기:

디스플레이가 있어야 display: table-cell;
수직 정렬이 있어야 합니다 vertical-align: middle;
text-align: center; 가 있어야 합니다.

내용 상자:

display: inline-block;

데모:

 .outer-container { display: table; width: 100%; height: 120px; background: #CCC; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .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"> Center this! </div> </div> </div>

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

Question 22

플렉스박스

display: flex 는 블록 요소처럼 동작하고 flexbox 모델에 따라 내용을 배치합니다. justify-content: center 와 함께 작동합니다.

참고: Flexbox는 Internet Explorer를 제외한 모든 브라우저와 호환됩니다. 브라우저 호환성의 전체 최신 목록은 Internet Explorer에서 flex가 작동하지 않음을 참조하십시오.

 #inner { display: inline-block; } #outer { display: flex; justify-content: center; }

 <div id="outer"> <div id="inner">Foo foo</div> </div>

텍스트 정렬: 가운데

text-align: center 적용: center 인라인 내용은 라인 상자 내 중앙에 배치됩니다. 그러나 내부 div의 기본 width: 100% 이므로 특정 너비를 설정하거나 다음 중 하나를 사용해야 합니다.

 #inner { display: inline-block; } #outer { text-align: center; }

 <div id="outer"> <div id="inner">Foo foo</div> </div>

여백: 0 자동

여백 사용 margin: 0 auto 는 또 다른 옵션이며 이전 브라우저 호환성에 더 적합합니다. display: table 과 함께 작동합니다.

 #inner { display: table; margin: 0 auto; }

 <div id="outer"> <div id="inner">Foo foo</div> </div>

변환

transform: translate 사용하면 CSS 시각적 서식 모델의 좌표 공간을 수정할 수 있습니다. 이를 사용하여 요소를 변환, 회전, 크기 조정 및 기울이기할 수 있습니다. 수평으로 가운데에 맞추려면 position: absolute 및 left: 50% 합니다.

 #inner { position: absolute; left: 50%; transform: translate(-50%, 0%); }

 <div id="outer"> <div id="inner">Foo foo</div> </div>

`<center>` (더 이상 사용되지 않음)

<center> 태그 text-align: center 의 HTML 대안입니다. 이전 브라우저와 대부분의 새 브라우저에서 작동하지만 이 기능은 더 이상 사용되지 않고 웹 표준에서 제거되었기 때문에 좋은 방법으로 간주되지 않습니다.

 #inner { display: inline-block; }

 <div id="outer"> <center> <div id="inner">Foo foo</div> </center> </div>

Question 23

가장 쉬운 방법:

 #outer { width: 100%; text-align: center; } #inner { margin: auto; width: 200px; }

 <div id="outer"> <div id="inner">Blabla</div> </div>

Question 24

내용의 너비를 알 수 없는 경우 다음 방법을 사용할 수 있습니다 . 다음 두 요소가 있다고 가정합니다.

.outer -- 전체 너비
.inner -- 너비가 설정되지 않았습니다(그러나 최대 너비를 지정할 수 있음).

요소의 계산된 너비가 각각 1000픽셀과 300픽셀이라고 가정합니다. 다음과 같이 진행하십시오.

.inner .center-helper 안에 .inner 감싸기
.center-helper 를 인라인 블록으로 만듭니다. .inner 와 같은 크기가 되어 너비가 300픽셀이 됩니다.
.center-helper 50% 오른쪽으로 푸시합니다. 이것은 왼쪽을 500픽셀 wrt에 배치합니다. 밖의.
.inner 50%를 왼쪽으로 푸시합니다. 이것은 왼쪽을 -150픽셀 wrt에 배치합니다. 왼쪽이 500 - 150 = 350픽셀 wrt에 있음을 의미하는 센터 도우미입니다. 밖의.
가로 스크롤 막대를 방지하려면 .outer 오버플로를 숨김으로 설정합니다.

데모:

 body { font: medium sans-serif; } .outer { overflow: hidden; background-color: papayawhip; } .center-helper { display: inline-block; position: relative; left: 50%; background-color: burlywood; } .inner { display: inline-block; position: relative; left: -50%; background-color: wheat; }

 <div class="outer"> <div class="center-helper"> <div class="inner"> <h1>A div with no defined width</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Duis condimentum sem non turpis consectetur blandit.<br> Donec dictum risus id orci ornare tempor.<br> Proin pharetra augue a lorem elementum molestie.<br> Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p> </div> </div> </div>

Question 25

다음과 같이 할 수 있습니다.

 #container { display: table; width: <width of your container>; height: <height of your container>; } #inner { width: <width of your center div>; display: table-cell; margin: 0 auto; text-align: center; vertical-align: middle; }

이것은 또한 #inner 수직으로 정렬합니다. 원하지 않으면 display 및 vertical-align 속성을 제거하십시오.

Question 26

Flex는 97% 이상의 브라우저 지원 범위를 가지며 몇 줄 내에 이러한 종류의 문제를 해결하는 가장 좋은 방법일 수 있습니다.

 #outer { display: flex; justify-content: center; }

Question 27

가장 짧은 방법으로 원하는 것이 있습니다.

JSFIDDLE

 #outer { margin - top: 100 px; height: 500 px; /* you can set whatever you want */ border: 1 px solid# ccc; } #inner { border: 1 px solid# f00; position: relative; top: 50 % ; transform: translateY(-50 % ); }

Question 28

display: flex 를 사용할 수 있으며 justify-content: center 를 추가해야 합니다.

 #outer{ display: flex; justify-content: center; }

또는 w3schools - CSS flex Property 를 방문하여 더 많은 아이디어를 얻을 수 있습니다.

Question 29

이 방법도 잘 작동합니다.

 div.container { display: flex; justify-content: center; /* For horizontal alignment */ align-items: center; /* For vertical alignment */ }

내부 <div> 의 경우 유일한 조건은 height 와 width 가 컨테이너의 높이와 너비보다 크지 않아야 한다는 것입니다.

Question 30

글쎄, 나는 모든 상황에 적합하지만 JavaScript를 사용하는 솔루션을 찾았습니다.

구조는 다음과 같습니다.

 <div class="container"> <div class="content">Your content goes here!</div> <div class="content">Your content goes here!</div> <div class="content">Your content goes here!</div> </div>

다음은 JavaScript 스니펫입니다.

 $(document).ready(function() { $('.container .content').each( function() { container = $(this).closest('.container'); content = $(this); containerHeight = container.height(); contentHeight = content.height(); margin = (containerHeight - contentHeight) / 2; content.css('margin-top', margin); }) });

반응형 접근 방식에서 사용하려는 경우 다음을 추가할 수 있습니다.

 $(window).resize(function() { $('.container .content').each( function() { container = $(this).closest('.container'); content = $(this); containerHeight = container.height(); contentHeight = content.height(); margin = (containerHeight - contentHeight) / 2; content.css('margin-top', margin); }) });

Question 31

내가 찾은 한 가지 옵션이 있습니다.

모두가 다음을 사용한다고 말합니다.

 margin: auto 0;

그러나 다른 옵션이 있습니다. 상위 div에 대해 이 속성을 설정합니다. 언제든지 완벽하게 작동합니다.

 text-align: center;

그리고 봐, 아이가 센터에 간다.

마지막으로 CSS:

 #outer{ text-align: center; display: block; /* Or inline-block - base on your need */ } #inner { position: relative; margin: 0 auto; /* It is good to be */ }

GUID/UUID를 만드는 방법 (0)	2021.09.30
정적 메서드와 클래스 메서드의 차이점 (0)	2021.09.30
로컬 리포지토리 분기를 원격 리포지토리 HEAD와 동일하게 재설정 (0)	2021.09.30
Google이 while(1)을 앞에 추가하는 이유는 무엇입니까? JSON 응답에? (0)	2021.09.30
확실한 C++ 책 가이드 및 목록 (0)	2021.09.30

No error , No gain

요소를 가로로 가운데에 맞추는 방법

편집하다

상자 모델:

자식 요소의 중앙 정렬에 대해 자세히 알아보기

알 수 없는 높이와 너비의 div 중앙에 맞추기

수평으로만 센터링

컨테이너:

내용 상자:

데모:

수평 및 수직 센터링

외부 용기:

내부 용기:

내용 상자:

데모:

플렉스박스

텍스트 정렬: 가운데

여백: 0 자동

변환

`<center>` (더 이상 사용되지 않음)

'etc. > StackOverFlow' 카테고리의 다른 글

'etc./StackOverFlow'의 다른글

티스토리툴바

요소를 가로로 가운데에 맞추는 방법

편집하다

상자 모델:

자식 요소의 중앙 정렬에 대해 자세히 알아보기

알 수 없는 높이와 너비의 div 중앙에 맞추기

수평으로만 센터링

컨테이너:

내용 상자:

데모:

수평 및 수직 센터링

외부 용기:

내부 용기:

내용 상자:

데모:

플렉스박스

텍스트 정렬: 가운데

여백: 0 자동

변환

<center> (더 이상 사용되지 않음)

'etc. > StackOverFlow' 카테고리의 다른 글

'etc./StackOverFlow'의 다른글

관련글

티스토리툴바

`<center>` (더 이상 사용되지 않음)