CSS를 사용하여 <div>다른 것을 수평으로 가운데에 <div>맞출 수 있습니까?

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

이 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>

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

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

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

내부 div를 인라인 요소로 만들어 중심에 맞출 수 있습니다 text-align.

가장 좋은 방법은 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;
}

자식 요소의 중심에 대해 자세히 알아보십시오

• 링크 2

• 링크 3

• 링크 4

그리고 이것은 박스 모델이 가장 좋은 접근법 인 이유를 설명합니다 .

• W3C 박스 모델이 더 나은 이유는 무엇입니까?

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

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

이 예제 를 작성 하여 세로 및 가로 방법을 보여줍니다 align.

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

#outer {
  position: relative;
}

과...

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

그리고 화면 크기center 를 조정할 때도 그대로 유지됩니다 .

일부 포스터는 CSS 3을 사용하여 중심에 맞추는 방법을 언급했습니다 display:box.

이 구문은 오래되어 더 이상 사용해서는 안됩니다. [ 이 게시물 참조 ] .

완전 함을 위해 여기에 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에 이전 구문을 사용하는 구형 브라우저를 지원 해야하는 경우 여기에 있습니다. 를 살펴보십시오.

고정 너비를 설정하지 않고 여분의 여백을 원하지 않으면 추가하십시오. display: inline-block 요소에 하십시오.

당신이 사용할 수있는:

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

알 수없는 높이와 너비의 div를 중심으로

수평 및 수직. 최신 브라우저 (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera 등)와 호환됩니다.

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

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

Codepen 또는 JSBin에서 추가로 땜질 하십시오 .

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

CSS 3의 상자 정렬 속성

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

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

최근에 "숨겨진"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>

내가 보통하는 방법은 절대 위치를 사용하는 것입니다.

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

외부 div에는이 작업을 수행하기 위해 추가 속성이 필요하지 않습니다.

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 Quirks 모드에서는 레거시 브라우저 지원에 필요합니다.

사용하다:

#outerDiv {
  width: 500px;
}

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

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

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

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

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

여기는 바이올린입니다 수평 및 수직 정렬을 표시합니다.

자세한 내용은 Mozilla 개발자 네트워크에 있습니다.

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

최근에 접근 방식을 찾았습니다.

#outer {
    position: absolute;
    left: 50%;
}

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

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

예를 들어 아래 링크 와 스 니펫을 참조하십시오.

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>

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

수평으로 만 중심

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

컨테이너 :

• 있어야한다 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>

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

가장 쉬운 방법 :

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

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

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

• .outer -- 전체 넓이
• .inner -너비가 설정되지 않았지만 최대 너비를 지정할 수 있음

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

1. .inner내부 포장.center-helper
2. .center-helper인라인 블록을 만드십시오 . .inner300 픽셀 너비 와 같은 크기가됩니다 .
3. 푸시 .center-helper부모를 기준으로 50 % 오른쪽을 . 이렇게하면 왼쪽이 500 픽셀 (wrt)에 배치됩니다. 밖의.
4. .inner부모를 기준으로 50 % 왼쪽으로 미 십시오 . 이것은 왼쪽을 -150 픽셀 wrt에 배치합니다. 가운데 도우미는 왼쪽이 500-150 = 350 픽셀입니다. 밖의.
5. .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>

이런 식으로 할 수 있습니다

#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속성을 제거하십시오 .

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

JS 피들

#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 % );
}

텍스트 정렬 : 가운데

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

• display: block
• display: inline
• display: inline-block

#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>

플렉스 박스

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

참고 : Flexbox는 대부분의 브라우저와 호환되지만 전부는 아닙니다. 최신 브라우저 호환성 목록을 보려면 여기 를 참조 하십시오 .

#inner {
  display: inline-block;
}

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

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

변환

transform: translateCSS 비주얼 형식화 모델의 좌표 공간을 수정할 수 있습니다. 이를 사용하여 요소를 변환, 회전, 크기 조정 및 기울일 수 있습니다. 중앙에 수평이 필요 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>는의 HTML 대안 text-align: center입니다. 이전 브라우저와 대부분의 새 브라우저에서 작동하지만이 기능은 더 이상 사용되지 않으며 웹 표준에서 제거되었으므로 권장 되지 않습니다 .

#inner {
  display: inline-block;
}

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

display: flex외부 div에 사용할 수 있으며 가로로 가운데에 추가해야합니다.justify-content: center

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

또는 더 많은 아이디어를 얻으 려면 w3schools-CSS flex Property 을 방문하십시오 .

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

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

글쎄, 모든 상황에 적합하지만 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);
  })
});

이 방법은 잘 작동합니다.

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

내부의 경우 <div>, 유일한 조건은 것입니다 height그리고 width반드시 그 컨테이너의 것보다 클 수 없습니다.

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

모두가 사용하라고 말합니다.

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 */
}