Flexbox : 수평 및 수직 중심

flexbox를 사용하여 컨테이너 내에서 div를 가로 및 세로로 가운데에 배치하는 방법. 아래 예제에서 가로 아래에있는 각 숫자가 서로 아래에 (행으로) 표시됩니다.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

나는 당신이 다음과 같은 것을 원한다고 생각합니다.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

http://jsfiddle.net/audetwebdesign/tFscL/ 에서 데모를 참조하십시오

귀하의 .flex-item요소 (블록 수준이어야한다 div대신에 span당신이 제대로 작동하려면 높이와 위 / 아래 여백을 원하는 경우).

또한에 .row너비 auto대신을 설정하십시오 100%.

당신의 .flex-container속성은 괜찮습니다.

를 .row뷰 포트에서 세로로 가운데에 맞추려면 html및에 100 % 높이를 할당 body하고 body여백을 0으로 만듭니다.

.flex-container세로 정렬 효과를 보려면 높이 가 필요합니다. 그렇지 않으면 컨테이너가 내용을 둘러싸는 데 필요한 최소 높이를 계산합니다 (이 예에서는 뷰 포트 높이보다 작음).

각주 : , , 속성이 디자인 쉽게 구현하기 위해 만들었을 수도. 내가 생각 당신이 (그래서 배경 이미지, 테두리와) 몇 가지 요소 주위에 스타일을 추가하지 않으려면 용기가 필요하지 않습니다.
flex-flowflex-directionflex-wrap.row

유용한 리소스는 다음과 같습니다. http://demo.agektmr.com/flexbox/

Flexbox에서 요소를 세로 및 가로로 가운데에 배치하는 방법

다음은 두 가지 일반적인 센터링 솔루션입니다.

하나는 세로로 정렬 된 플렉스 항목 ( flex-direction: column)과 다른 하나는 가로로 정렬 된 플렉스 항목 ( flex-direction: row)에 해당합니다.

두 경우 모두 중심 div의 높이는 가변적이거나 정의되지 않았으며 알 수없는 것일 수 있습니다. 중심 div의 높이는 중요하지 않습니다.

다음은 모두 HTML입니다.

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS (장식 스타일 제외)

플렉스 아이템이 수직으로 쌓일 때 :

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

데모

플렉스 아이템이 수평으로 쌓일 때 :

flex-direction위의 코드 에서 규칙을 조정하십시오 .

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

데모

플렉스 아이템의 내용을 중심으로

플렉스 서식 컨텍스트 의 범위는 부모-자식 관계로 제한됩니다. 자식 이외의 플렉스 컨테이너의 자손은 플렉스 레이아웃에 참여하지 않으며 플렉스 속성을 무시합니다. 본질적으로, 플렉스 속성은 어린이를 넘어서 상속 될 수 없습니다.

따라서 플렉스 속성을 자식 에 적용하려면 항상 부모 요소 를 적용 display: flex하거나 적용해야합니다 display: inline-flex.

플렉스 항목에 포함 된 텍스트 또는 기타 내용을 세로 및 / 또는 가로로 가운데에 맞추려면 항목을 (중첩) 플렉스 컨테이너로 만들고 가운데 맞춤 규칙을 반복하십시오.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

자세한 내용은 여기 : flexbox 안에 텍스트를 세로로 맞추는 방법은 무엇입니까?

또는 margin: autoflex 항목의 content 요소에 적용 할 수 있습니다 .

p { margin: auto; }

플렉스 auto마진 에 대한 자세한 내용은 플렉스 항목 정렬 방법 (상자 # 56 참조)을 참조하십시오.

여러 라인의 플렉스 아이템 중심

플렉스 컨테이너에 여러 줄이있는 경우 (래핑으로 인해) align-content교차 축 정렬에 속성이 필요합니다.

사양에서 :

8.4. 플렉스 라인 포장 : align-content 속성

이 align-content속성은 주축 justify-content내에서 개별 항목을 정렬 하는 방법 과 유사하게, 가로축에 여분의 공간이 있으면 플렉스 컨테이너 내에서 플렉스 컨테이너의 선을 정렬합니다. 이 프로퍼티는 1 행 플렉스 컨테이너에는 영향을 미치지 않습니다.

자세한 내용은 다음과 같습니다. flex-wrap은 align-self, align-items 및 align-content와 어떻게 작동합니까?

브라우저 지원

Flexbox는 IE <10을 제외한 모든 주요 브라우저에서 지원됩니다 . Safari 8 및 IE10과 같은 일부 최신 브라우저 버전에는 공급 업체 접두사가 필요합니다 . 접두사를 빠르게 추가하려면 Autoprefixer를 사용 하십시오 . 이 답변에 대한 자세한 내용 .

구형 브라우저를위한 센터링 솔루션

CSS 테이블 및 위치 지정 속성을 사용하는 대체 센터링 솔루션에 대해서는 다음 답변을 참조하십시오. https://stackoverflow.com/a/31977476/3597276

더하다

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

가운데에 맞추려는 컨테이너 요소에 설명서 : justify-content 및 align-items .

중요한 브라우저 특정 속성을 사용하는 것을 잊지 마십시오 :

정렬 항목 : 중심; ->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

정당화 내용 : 센터; ->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

flex 이해를 돕기 위해이 두 링크를 읽을 수 있습니다 : http://css-tricks.com/almanac/properties/j/justify-content/ 및 http://ptb2.me/flexbox/

행운을 빕니다.

1-부모 div의 CSS를 display: flex;

2-parent div의 CSS를 div로 설정 flex-direction: column;
하면 해당 div의 모든 내용이 위 아래로 표시됩니다. 부모 div에 자식 만 포함되어 있고 다른 항목이없는 경우 가장 효과적입니다.

3-부모 div의 CSS를 justify-content: center;

다음은 CSS의 모습에 대한 예입니다.

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

당신은 사용할 수 있습니다

display: flex; align-items: center; justify-content: center;

부모 구성 요소

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;그것은 컨테이너이고 margin:auto;아이템은 완벽하게 작동합니다.

참고 : 당신은 설정에있는 width및 height효과를 볼 수 있습니다.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}

<div id="container">
   <div class="item">CENTER</div>
</div>

링크의 텍스트를 중앙에 배치 해야하는 경우 트릭을 수행합니다.

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}

<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

margin: autoflexbox와 완벽하게 작동합니다. 수직 및 수평으로 중앙 집중화됩니다.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>

결과:

암호

HTML :

<div class="flex-container">
  <div class="rows">

    <div class="row">
      <span class="flex-item">1</span>
    </div>
    <div class="row">
      <span class="flex-item">2</span>
    </div>
    <div class="row">
      <span class="flex-item">3</span>
    </div>
    <div class="row">
      <span class="flex-item">4</span>
    </div>

  </div>  
</div>

CSS :

html, body {
  height: 100%;  
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
}

어디 flex-containerDIV는 수직 및 수평 센터로 사용된다 rows사업부, 그리고 rows사업부는 그룹에 "항목을"사용하고 열을 기반으로 하나를 주문한다.

    .flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

CSS + 사용

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

여기를 보세요