<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 입니다.

박스 모델 :

#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 속성을 사용할 수도 있습니다.

Flex :

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

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

• 링크 2

• 링크

• 링크 4

그리고 이것은 왜 박스 모델이 최선의 접근 방식인지 설명합니다 :

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

Div가 200px wide라고 가정합니다.

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

상위 요소가 positions 즉 상대, 고정, 절대 또는 고정인지 확인하십시오.

Div의 폭을 모를 경우 음수 여백 대신 transform:translateX(-50%);을 사용할 수 있습니다.

https://jsfiddle.net/gjvfxxdj/

이 example 을 작성하여 수직및 수평align).

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

#outer {
  position: relative;
}

과...

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

re-size화면이더라도) center에 머무를 것입니다.

일부 포스터는 display:box를 사용하여 CSS 3 방식으로 센터를 언급했습니다.

이 구문은 구식이므로 더 이상 사용하지 않아야합니다. [또한 이 게시물을 참조하십시오] .

여기 완전성을 위해 CSS3에서유연한 박스 레이아웃 모듈을 사용하여 센터링하는 최신 방법이 있습니다.

그래서 간단한 마크 업을 가지고 있다면 :

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

CSS3의 box-align 속성

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

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

width을 설정하고 margin-left 및 margin-right를 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 에 추가로 팅커를 추가하십시오.

나는 최근 페이지의 중앙에 있어야 할 필요가있는 표 형식을 가진 "숨겨진"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>

Chris Coyier는 블로그의 '알 수없는 센터링'에 excellent post 를 썼습니다. 여러 솔루션을 모아 놓은 것입니다. 이 질문에 게시되지 않은 게시물을 게시했습니다. 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;
}

요소 중 하나의 너비를 설정하지 않고도이를위한 또 다른 해결책은 CSS 3 transform 특성을 사용하는 것입니다.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

여기에 Fiddle 가로 및 세로 정렬을 보여줍니다.

자세한 정보는 Mozilla Developer Network .

게임에 꽤 늦었다는 것을 알았지 만, 이것은 매우 인기있는 질문이며, 최근 여기 어디서나 언급하지 않은 접근법을 발견 했으므로 문서화하겠다고 생각했습니다.

#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 내용은 이와 같아야합니다. { 바이올린 예제 .

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>

그렇다면 바이올린 예제 를보십시오.

가장 쉬운 방법 :

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

<div id="outer">
  <div id="inner">Blabla</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>

this Fiddle !

수평 및 수직 중심 맞춤

내 경험에 비추어 볼 때 양쪽 세로 및 가로 가운데에 상자를 배치하는 가장 좋은 방법은 추가 컨테이너를 사용하고 다음 속성을 적용하는 것입니다.

외부 컨테이너 :

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

this Fiddle !

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

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

텍스트 정렬 : 가운데

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

Flexbox

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

참고 : Flexbox은 (는) 대부분의 브라우저와 호환되지만 일부는 지원하지 않습니다. 완전한 최신 브라우저 호환성 목록은 here 를 참조하십시오.

_#inner {
  display: inline-block;
}

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

_<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> 태그는 의 HTML 대안입니다. _text-align: center_ . 이전 브라우저와 대부분의 새 브라우저에서 작동하지만이 기능은 obsolete 이고 웹 표준에서 제거되었으므로 좋은 방법으로 간주되지 않습니다.

_#inner {
  display: inline-block;
}_

_<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</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 속성을 제거하십시오.

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

• .outer - 전체 너비
• .inner - 너비 세트가 없습니다 (그러나 최대 너비를 지정할 수 있음).

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

1. .inner 내부에서 .center-helper 줄 바꿈
2. .center-helper를 인라인 블록으로 만듭니다. .inner와 동일한 크기가되어 300px 크기가됩니다.
3. .center-helper를 부모에 비해 50 % 정도 밀어 넣으십시오. 이것은 500px wrt에서 왼쪽을 배치합니다. 밖의.
4. .inner를 부모에 비해 50 % 밀어 넣습니다. 이것은 -150px wrt에서 왼쪽을 배치합니다. 센터 도우미는 왼쪽이 500 - 150 = 350px wrt임을 의미합니다. 밖의.
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>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

글쎄, 모든 상황에 맞는 솔루션을 찾을 수 있었지만 자바 스크립트를 사용했다.

구조는 다음과 같습니다.

<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에 display: flex를 사용하고 justify-content: center를 수평으로 가운데에 추가해야합니다.

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

w3schools - CSS flex Property 아이디어를 더 구할 수 있습니다.

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

모두가 사용하라 :

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

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

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

이 방법도 잘 작동합니다.

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

내부 <div>의 유일한 조건은 height 및 width이 컨테이너의 것보다 커서는 안됩니다.

함께 놀아보십시오. 

margin: 0 auto;

텍스트를 중앙에 배치하려면 다음을 사용하십시오.

text-align: center;

누구든지 center에 대한 jQuery 솔루션을 원한다면 다음 div를 정렬하십시오.

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});

flexbox 다음과 같이 간단하게 사용할 수 있습니다 :

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

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

모든 브라우저 지원에 자동 프리픽스 적용 :

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

그렇지 않으면

변환 : 사용

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

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

자동 프리 픽서 기능 :

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

CSS 3 :

상위 컨테이너에서 다음 스타일을 사용하여 자식 요소를 수평 적으로 균등하게 배포 할 수 있습니다.

display: flex;
justify-content: space-between;  // <-- space-between or space-around

Nice DEMO 는 justify-content의 다른 값에 관한 것입니다.

CanIUse : 브라우저 호환성

사용해보기! :

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

내부 div에 인라인 스타일을 적용했습니다. 이걸 사용하십시오. 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>

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

CSS Flexbox를 사용하여이 작업을 수행 할 수 있습니다. 모든 요소를 ​​작동 시키려면 부모 요소에 3 개의 속성 만 적용하면됩니다.

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

아래 코드를 살펴보면 속성을 훨씬 잘 이해할 수 있습니다.

CSS Flexbox에 대한 자세한 정보

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }

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

내가 최근에 발견 한 좋은 점은 line-height + vertical-align와 50% 왼쪽 트릭을 섞어서 사용하면 순수 CSS를 사용하여 가로 및 세로 모두 다른 동적 크기 상자 안에 동적 크기 상자를 center 할 수 있습니다. 

최신 브라우저 + IE8에서 테스트 한 범위 (및 inline-block)를 사용해야합니다. HTML :

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS :

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

여기 예제를 참조하십시오 . 

#inner div에 대한 아래의 CSS는 어떻습니까?

#inner {
  width: 50%;
  margin-left: 25%;
}

나는 주로 div를 센터링하기 위해이 CSS를 사용한다.

Div의 div 중심 지정

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}

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

간단하게!

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

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

난 그냥 간단한 솔루션을 사용하지만 모든 브라우저에서 작동합니다 :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>

용도:

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

스타일:

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

수평으로 가운데에 놓으려면 아래와 같이 작성해야합니다.

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

CSS 3 flexbox 를 사용하면 가능합니다. 플렉스 박스를 사용할 때 두 가지 방법이 있습니다.

1. 상위 요소를 display:flex;로 설정하고 {justify-content:center; ,align-items:center;} 속성을 상위 요소에 추가하십시오.

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

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

2. 부모를 display:flex로 설정하고 자식에게 margin:auto;를 추가하십시오.

#outer{
  display: flex;
}
#inner{
  margin: auto;
}

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

다음과 같이 절대 위치 지정을 사용하여 가로 및 세로 중심에 배치 할 수도 있습니다.

#outer{
    position: relative;
}

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

Flexbox를 사용할 수 있습니다.

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

이 링크에서 자세한 정보를 얻을 수 있습니다 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

아무도 calc 메서드에 대해 언급하지 않은 것을 알았으므로이 질문에 대답하고 싶습니다. 사용법은 중심에있는 div에 대한 것으로, 너비를 알고있는 경우 1200 픽셀이라고 가정합니다.

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

따라서 기본적으로 알려진 너비의 절반에서 50 %의 왼쪽 여백을 뺀 값이 추가됩니다.

널리 사용되며 많은 브라우저에서 사용되는 가장 잘 알려진 방법은 다음과 같이 margin을 사용하는 것입니다.

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}

<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

코드를 실행하여 작동 방식을 확인하고, CSS에서 잊지 말아야 할 2 가지 중요한 사항이 있습니다. margin: 0 auto;는 원하는대로 div 중심을 만들고, width을 잊지 마십시오. 그렇지 않으면 예상대로 중앙에 맞춰지지 않습니다! 

우리는 이것을 쉽게 달성하기 위해 FLEXBOX 사용할 수 있습니다 :

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

Div를 수평으로 div 중앙에 배치하십시오.

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

Div 내부의 div를 수직으로 중앙에 배치하십시오.

#outer { 
  display: flex;
  align-items: center;
    }

그리고 div를 세로 및 가로로 완전히 가운데에 넣으려면 :

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

그것이 당신에게 도움이되기를 바랍니다. 행복한 코딩!

이 질문은 여전히 ​​많은 히트를 얻었 기 때문에 2019 년부터 수평 중심에 대한 매우 간단하고 크로스 브라우저 해답은이 규칙을 부모 요소에 적용하는 것입니다.

.parentBox {
 display: flex;
 justify-content: center
}

다음은 flexbox 를 사용하여 내부 컨테이너에 너비를 지정하지 않고 수평으로 정렬하는 또 다른 방법입니다. 아이디어는 오른쪽과 왼쪽에서 내부 내용을 푸시하는 의사 요소를 사용하는 것입니다.

Pseudo 요소에 flex:1를 사용하면 나머지 공간을 채우고 동일한 크기를 가지게되고 내부 컨테이너가 가운데에 배치됩니다.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

플렉스 방향을 단순히 열로 변경하여 수직 정렬에 대해서도 동일한 상황을 고려할 수 있습니다.

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

이렇게하면 내부 div가 가로 및 세로로 중앙 집중화됩니다.

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

수평 맞춤 만 변경하려면

margin: 0 auto;

수직의 경우 변경

margin: auto 0;

CSS

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

HTML

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

모든 대답을 읽은 후에 나는 내가 좋아하는 것을 보지 못했습니다. 이것은 다른 요소를 가운데에 배치하는 방법입니다. 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

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

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}

이 코드를 추가 할 수 있습니다 :

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}

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

상황에 따라 가장 간단한 해결책은 다음과 같습니다.

margin:0 auto; float:none;

가장 쉬운 대답 추가 여백 : 자동; 내부.

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

cSS 코드

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

내 codepen 링크를 확인하십시오 http://codepen.io/feizel/pen/QdJJrK

width을 내부 div에주고 margin:0 auto;를 CSS 속성에 추가하십시오.

용도:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>

예, 이것은 수평 정렬을위한 짧고 깨끗한 코드입니다. 이 코드가 마음에 듭니다.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}

아래 코드를 사용하십시오.

HTML

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

CSS

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

이 코드를 사용하십시오 :

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

요즘 플렉스 박스 마녀를 사용하여 구매할 수 있습니다. 플렉스 박스를 사용하려면 부모 또는 display: flex; div 요소에 align-items: center; 및 #outer를 제공해야합니다. 코드는 다음과 같아야합니다.

#outer {
  display: flex;
  align-items: center;
}

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

이것은 자녀 또는 #inner div의 중심을 수평으로 배치해야합니다. 그러나 실제로 변경 사항을 볼 수는 없습니다. #outer div에는 높이가 없으므로 높이가 auto로 설정되어 있으므로 모든 하위 요소와 높이가 같습니다. 따라서 약간의 시각적 스타일을 적용한 결과 코드는 다음과 같아야합니다.

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}

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

#inner div가 이제 중앙에 있음을 볼 수 있습니다. Flex-box는 CSS를 사용하여 가로 또는 세로 스택에 요소를 배치하는 새로운 방법이며 전역 브라우저 호환성의 96 %를 차지합니다. 그래서 당신은 그것을 자유롭게 사용할 수 있습니다. Flex-box visit CSS-Tricks article)에 대한 자세한 정보는 Flex Box를 사용하여 배우는 가장 좋은 방법입니다.

너무 간단합니다.

그냥 내부 div 수주고 싶지 너비를 결정하고 다음 CSS를 사용하십시오.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}

이렇게하면 반드시 #inner가 수평 및 수직 가운데에 집중됩니다. 이것은 모든 브라우저에서 호환됩니다. 방금 중심에 배치하는 방법을 보여주기 위해 추가 스타일링을 추가했습니다.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 

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

물론 수평으로 정렬하기를 원한다면 도움이 될 것입니다.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 

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

text-align:center 한 줄의 코드 만 사용할 수 있습니다.

다음은 그 예입니다.

#inner {
  text-align:center;
  }

<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

가장 쉬운 방법 중 하나는 display: flex를 사용하는 것입니다. 바깥 쪽 div는 플렉스 표시가 있어야하고 내부는 가로로 가운데 맞추기 위해 margin: 0 auto가 필요합니다.

수직으로 중심을두고 다른 div 내에 div를 가운데에 배치하려면 아래의 .inner 클래스의 주석을 살펴보십시오.

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}

<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}

가장 쉬운 방법 중 하나 ...

<!DOCTYPE html> 
<html>
 <head>
    <style>
        #outer-div {
        width: 100%; 
        text-align: center;
        background-color: #000 
        }
        #inner-div {
        display: inline-block; 
        margin: 0 auto;
        padding: 3px;
        background-color: #888
        }
    </style>
 </head>
 <body>
    <div id ="outer-div" width="100%">
        <div id ="inner-div"> I am a easy horizontally centered div.</div>
    <div>
 </body>
</html>

미안하지만, 1990 년대의이 아기는 나를 위해 일했습니다.

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

나는이 죄 때문에 지옥에 갈 것인가?

다양한 프로젝트에서 내가 사용한 최고가 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

바이올린 링크

다음 CSS 클래스를 사용하여 부모를 기준으로 요소를 세로 및 가로 방향으로 가운데에 배치 할 수 있습니다.

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

HTML :

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

CSS :

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

가장 좋은 방법은 표시 테이블 (바깥 쪽)과 div 뒤에 정확히 오는 표 셀 표시 (안쪽)를 사용하고 내부 div (표 셀 표시가있는)와 내부 div에 사용하는 모든 태그에 대해 세로 맞춤을 설정하는 것입니다 div 또는 page의 중심에 있습니다.

참고 : 지정된 높이를 outer로 설정해야합니다.

상대적인 위치 또는 절대 위치없이 가장 잘 알 수 있으며 모든 브라우저에서 동일하게 사용할 수 있습니다.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


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

<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

여러 개의 래퍼 및/또는 자동 여백 대신이 간단한 솔루션이 유용합니다.

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Div (가로 및 세로)보기, 세로 크기 및 센터 배경 이미지 (세로 및 가로), 센터 텍스트 (가로) 및보기 및 콘텐츠 맨 위에 div 유지합니다. 단순히 HTML body에 넣고 즐기십시오.

이것을 시험해보십시오 :

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}

이것은 나를 위해 일했다 :

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

이 코드에서는 요소 너비를 결정해야합니다.

나는 margin-left와 비슷한 것을 발견했지만 left 일 수도 있습니다.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}

같은 크기의 #inner를 가진 다른 div를 추가하고 왼쪽으로 -50 % (# inner 너비의 절반) 및 #inner를 50 %만큼 왼쪽으로 이동할 수 있습니다. 내 영어가 유감입니다

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

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

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

내부 div에 CSS를 추가하십시오. margin: 0 auto를 설정하고 외부 div의 너비 인 100 %보다 작은 너비를 설정하십시오.

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

이렇게하면 원하는 결과를 얻을 수 있습니다.

나는이 질문에 답하기에 조금 늦다는 것을 알고 있으며, 모든 단일 대답을 읽지 않으려 고하지 않았다. 그래서 this may duplicate가 될 수있다. 내 걸릴거야 :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

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

그냥 간단하게 Margin:0px auto :

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}

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

부모 div에 text-align:center; 추가 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

또는 

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

Div에 중심을두기위한 주요 속성은 요구 사항에 따라 margin: auto 및 width:입니다.

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

정상적인 경우 div 정적 방법을 사용하는 경우

div가 그 부모에게 절대적 일 때 div가 중앙에 위치하게하려면 다음과 같이하십시오.

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

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}

당신은 다른 방식으로 그것을 할 수 있습니다. 아래 예제를 참조하십시오.

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


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

이 시도:

<div id="a">
    <div id="b"></div>
</div>

CSS :

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

우선 : 두 번째 div에 너비를 지정해야합니다.

예 :

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS :

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

너비를 지정하지 않으면 선의 전체 너비가 필요합니다.