html 속성 - Flexbox:수평 및 수직 중심




단점 사용법 (9)

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


Answers

더하다

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

당신이 중심에두기를 원하는 것의 컨테이너 요소에. 문서화 : justify-contentalign-items


displa: flex;
align-tems: center;
justify-content: center;


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

align-items : 센터; ->

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

justify-content : 센터; ->

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

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

행운을 빕니다.


1 - 부모 div에 CSS를 설정하여 display: flex;

2 - 부모 div의 CSS를 flex-direction: column;
이렇게하면 해당 div 행의 모든 ​​내용이 위에서 아래로 나타납니다. 상위 div가 하위 항목 만 포함하고 다른 항목은 포함하지 않는 경우이 방법이 가장 효과적입니다.

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

다음은 CSS의 모습입니다.

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


margin: auto 은 flexbox로 완벽하게 작동합니다. 그것은 수직 및 수평으로 집중됩니다.

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, 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 요소가 블록 수준 ( span 대신 div 이어야합니다.

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

.flex-container 속성이 좋습니다.

.row 를 뷰 포트에 세로로 가운데로 표시하려면 htmlbody 100 % 높이를 지정하고 body 여백도 제로로 지정하십시오.

.flex-container 는 수직 정렬 효과를보기 위해 높이가 필요합니다. 그렇지 않으면 콘테이너는 내용을 둘러싸는 데 필요한 최소 높이를 계산합니다.이 높이는이 예제의보기 포트 높이보다 작습니다.

각주:
flex-flow , flex-direction , flex-wrap 특성은이 설계를보다 쉽게 ​​구현할 수있게합니다. 당신이 요소 (배경 이미지, 테두리 등) 주위에 스타일을 추가하고 싶지 않으면 .row 컨테이너가 필요하지 .row 생각합니다.

유용한 리소스 : http://demo.agektmr.com/flexbox/


CSS + 사용하기

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

HERE 좀 봐


링크에 텍스트를 가운데에 맞춰야하는 경우 트릭을 수행합니다.

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>


더 새로운 브라우저는 이제 CSS calc 기능을 지원합니다. 이러한 브라우저를 타겟팅하는 경우 다음과 같은 작업을 수행 할 수 있습니다.

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

핵심은 style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" 상대적으로 위치하는 부모 div 내부.







html css html5 css3 flexbox