<div>를 가로로 가운데에 배치하는 방법

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

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

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

답변

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