CSS => 센터링

CSS 변환 사용

CSS 변환 은 요소의 크기를 기반으로하므로 요소가 얼마나 크거나 넓지 않은지 알면 상대 컨테이너의 위쪽과 왼쪽에서 절대적으로 50 %를 배치하고 왼쪽에서 위쪽으로 50 % 변환 할 수 있습니다 그것을 수직 및 수평으로 센터링한다.

이 기술을 사용하면 요소가 비 정수 픽셀 경계에서 렌더링되기 시작하여 흐리게 표시 될 수 있습니다. 해결 방법은 이 답변을 참조하십시오.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

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

JSFiddle에서 예제보기

크로스 브라우저 호환성

transform 속성에는 이전 브라우저에서 지원할 접두사가 필요합니다. 접두어는 Chrome <= 35, Safari <= 8, Opera <= 22, Android 브라우저 <= 4.4.4 및 IE9에 필요합니다. CSS 변환은 IE8 및 이전 버전에서 지원되지 않습니다.

다음은 앞의 예제에 대한 일반적인 변환 선언입니다.

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

자세한 내용은 다음을 참조 canIuse을 .

추가 정보

요소가 첫 번째 비 정적 부모 ( position: relative , absolute 또는 fixed )에 따라 배치됩니다. 이 바이올린 및이 설명서 항목 에서 더 많은 내용을 살펴보십시오.

수평 전용 센터링의 경우 left: 50% 및 transform: translateX(-50%) 합니다. 수직 중심 센터링에 대해서도 동일합니다. top: 50% 중심 top: 50% 및 transform: translateY(-50%) .

이 가운데 정렬 방법과 함께 정적이 아닌 너비 / 높이 요소를 사용하면 가운데 맞춤 요소가 찌그러져 보일 수 있습니다. 이것은 주로 텍스트를 포함하는 요소에서 발생하며 margin-right: -50%; margin-bottom: -50%; . 자세한 내용은이 바이올린 을보십시오.

Flexbox 사용

HTML :

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

CSS :

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

결과보기

HTML :

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

CSS :

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

결과보기

flexbox 및 스타일의 의미에 대한 자세한 내용은 Flexbox 설명서의 Dynamic Vertical and Horizontal Centering 을 참조하십시오.

브라우저 지원

Flexbox는 10 이전의 IE 버전을 제외한 모든 주요 브라우저에서 지원됩니다.

Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에는 공급 업체 프리픽스가 필요합니다.

접두사를 생성하는 빠른 방법은 타사 도구 인 Autoprefixer 가 있습니다.

구식 브라우저 (예 : IE 8 및 9)의 경우 Polyfill을 사용할 수 있습니다 .

flexbox 브라우저 지원에 대한 자세한 내용은 이 답변을 참조하십시오.

위치 사용 : 절대

오래된 브라우저에서 작업하기 (IE> = 8)

left 및 right 또는 top 및 bottom 오프셋에 대해 0의 값과 쌍을 이루는 자동 여백은 부모 내에 절대적으로 배치 된 요소를 가운데에 배치합니다.

결과보기

HTML

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

CSS

.parent {
  position: relative;
  height: 500px;
}

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

이미지처럼 암시적인 너비와 높이가없는 요소는 정의 된 값을 필요로합니다.

기타 리소스 : CSS의 절대 중심 지정

고스트 엘리먼트 기술 (Michał Czernow 's hack)

이 기술은 컨테이너의 크기를 알 수없는 경우에도 작동합니다.

100 % 높이의 가운데에 놓 이도록 컨테이너 안의 "고스트"요소를 설정 한 다음 vertical-align: middle 와 vertical-align: middle 둘 모두에 vertical-align: middle 를 사용합니다.

CSS

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

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

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

HTML

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

텍스트 정렬 사용

가장 일반적인 가장 쉬운 유형의 센터링은 요소의 텍스트 행입니다. CSS에는 text-align: center 라는 규칙이 있습니다.

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

이것은 전체 블록 요소를 센터링하는 데는 적합하지 않습니다 . text-align 은 부모 블록 요소의 텍스트와 같은 인라인 컨텐트의 정렬 만 제어합니다.

타이포그래피 섹션에서 text-align 에 대해 자세히 알아보십시오.

다른 항목과 관련된 중심 맞춤

가까운 요소의 높이를 기준으로 콘텐츠를 가운데에 배치하는 방법을 살펴 보겠습니다.

호환성 : IE8 +, 다른 모든 최신 브라우저.

HTML

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

CSS

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

JSFiddle에 링크

주요 요점은 3 개의 .thumb , .details 및 .position-container 컨테이너입니다.

.position-container 에는 display: table 이 있어야 display: table .
.details 에는 실제 너비 세트 width: .... 이 있어야하며 width: .... display: table-cell , vertical-align: middle .
.thumb 은 width: 100% 이어야합니다. 남은 공간이 모두 필요하면 .details 너비의 영향을받습니다.
.thumb 안에있는 이미지 (이미지가있는 경우)의 width: 100% .thumb 합니다 width: 100% 그러나 비율이 올바른 경우에는 필요하지 않습니다.

3 줄의 코드로 세로로 정렬

IE11에서 지원 +

결과보기

거의 모든 것을 수직으로 정렬하려면이 세 줄을 사용하십시오. 코드를 적용한 div / image에 높이가있는 부모가 있는지 확인하십시오.

CSS

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

HTML

<div class="vertical">Vertical aligned text!</div>

div 내부의 이미지를 수직 정렬

HTML

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

CSS

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

테이블 레이아웃을 사용하여 가로 및 세로 중심 맞춤

table 표시 속성을 사용하여 자식 요소를 쉽게 가운데에 배치 할 수 있습니다.

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

calc () 사용하기

calc () 함수는 픽셀, 백분율 등과 같은 다양한 값을 사용하여 요소가 차지하는 크기 / 위치를 수학적으로 계산할 수있는 CSS3의 새로운 구문의 일부입니다. 참고 : -이 함수를 사용할 때마다 , 항상 두 값 사이의 공간을 처리하십시오 calc(100% - 80px) .

CSS

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

동적 높이 요소를 세로로 정렬

직관적으로 CSS를 적용해도 원하는 결과가 나오지 않으므로

vertical-align:middle 은 블록 수준의 요소 에는 적용 할 수 없습니다.
margin-top:auto 및 margin-bottom:auto 사용 된 값은 0으로 계산됩니다.
margin-top:-50% 백분율 기반 여백 값은 포함 된 블록의 너비 에 상대적으로 계산됩니다.

가장 광범위한 브라우저 지원을 위해 헬퍼 요소를 사용하는 해결 방법은 다음과 같습니다.

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

원래 질문 에서 jsfiddle . 이 접근법

동적 높이 요소와 함께 작동합니다.
콘텐츠 흐름을 존중한다.
레거시 브라우저에서 지원됩니다.

줄 높이 사용

line-height 를 사용하여 컨테이너 내에서 한 줄의 텍스트를 세로로 가운데에 맞출 수 있습니다.

CSS

div {
    height: 200px;
    line-height: 200px;
}

그것은 꽤 못 생겼지 만 <input /> 요소 내에서 유용 할 수 있습니다. line-height 속성은 가운데 맞춤 할 텍스트가 한 줄에 걸쳐있는 경우에만 작동합니다. 텍스트가 여러 행으로 줄 바꿈되는 경우 결과 출력은 중앙에 배치되지 않습니다.

높이 또는 너비 걱정없이 수직 및 수평 중심 맞춤

다음 기술을 사용하면 HTML 요소에 내용을 추가 하고 높이 또는 너비를 걱정하지 않고 가로 및 세로로 가운데에 맞출 수 있습니다.

외부 용기

display: table; 해야 display: table;

내부 컨테이너

display: table-cell; 가 있어야 display: table-cell;
vertical-align: middle; 이 있어야합니다 vertical-align: middle;
text-align: center;

내용 상자

display: inline-block; 해야 display: inline-block;
수평 텍스트 맞춤을 다시 조정해야합니다. text-align: left; 또는 text-align: right; 텍스트를 가운데에 놓기를 원하지 않는다면

데모

HTML

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

CSS

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;
}

이 피들을 보십시오!

고정 된 크기로 센터링

콘텐츠의 크기가 고정 된 경우 절대 위치 지정을 사용하여 콘텐츠의 너비와 높이의 절반을 줄이는 margin 을 사용하여 50 %까지 사용할 수 있습니다.

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

고정 너비 만있는 수평 중심 맞춤

콘텐츠의 높이를 모르더라도 요소를 가로로 가운데로 맞출 수 있습니다.

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

고정 높이가있는 수직 센터링

요소의 높이를 아는 경우 요소를 세로 가운데에 가운데로 맞출 수 있습니다.

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

여백 사용 : 0 자동;

margin: 0 auto; 을 사용하여 개체를 중앙에 배치 할 수 있습니다 margin: 0 auto; 블록 요소이고 정의 된 너비가있는 경우

HTML

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

#centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
}

결과:

JSFiddle 예제 : 여백을 사용하여 오브젝트 가운데 맞추기 : 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

CSS
센터링

수색…

CSS 변환 사용

크로스 브라우저 호환성

추가 정보

Flexbox 사용

위치 사용 : 절대

고스트 엘리먼트 기술 (Michał Czernow 's hack)

텍스트 정렬 사용

다른 항목과 관련된 중심 맞춤

3 줄의 코드로 세로로 정렬

div 내부의 이미지를 수직 정렬

테이블 레이아웃을 사용하여 가로 및 세로 중심 맞춤

calc () 사용하기

동적 높이 요소를 세로로 정렬

줄 높이 사용

높이 또는 너비 걱정없이 수직 및 수평 중심 맞춤

외부 용기

내부 컨테이너

내용 상자

데모

고정 된 크기로 센터링

고정 너비 만있는 수평 중심 맞춤

고정 높이가있는 수직 센터링

여백 사용 : 0 자동;