Flexbox : 수평 및 수직 중앙

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너비를로 설정합니다 .auto100%

당신의 .flex-container재산은 괜찮습니다.

당신이 원하는 경우 .row에, 뷰 포트에 수직으로 할당 100 % 높이를 중심으로되어야 html하고 body, 또한 제로 아웃 body마진.

.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: auto플렉스 항목의 콘텐츠 요소에 적용 할 수 있습니다 .

p { margin: auto; }

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

---

여러 줄의 플렉스 항목 중앙에 배치

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

사양에서 :

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

이 align-content속성은 주축 justify-content내에서 개별 항목을 정렬 하는 방법 과 유사하게 교차 축에 추가 공간이있을 때 플렉스 컨테이너 내에서 플렉스 컨테이너의 선을 정렬합니다. 이 속성은 한 줄 플렉스 컨테이너에는 영향을주지 않습니다.

자세한 내용은 다음을 참조하십시오. 플렉스 랩은 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 - Set CSS on parent div to flex-direction: column;
Note that this will make all content within that div line up top to bottom. This will work best if the parent div only contains the child and nothing else.

3 - Set CSS on parent div to justify-content: center;

Here is an example of what the CSS will look like:

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

---

diplay: flex; for it's container and margin:auto; for it's item works perfect.

NOTE: You have to setup the width and height to see the effect.

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

---

If you need to center a text in a link this will do the trick:

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: auto works perfect with flexbox. It centralize vertically and horizontally.

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>

---

You can make use of

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

on your parent component

https://repl.it/repls/TomatoImaginaryInitialization

---

Using CSS+

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

take a look HERE

참고 URL : https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically