[css] 부트 스트랩 반응 형 페이지에서 div를 가운데에 배치하는 방법

아래 언급 된 레이아웃과 같이 페이지 중앙에 div를 배치하여 부트 스트랩을 사용하여 반응 형 페이지를 만들어야합니다.

답변

부트 스트랩 4 업데이트

플렉스 박스로 더 간단한 수직 그리드 정렬

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 row align-items-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

스 니펫 확장

부트 스트랩 3 솔루션

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html, body, .container-table {
    height: 100%;
}
.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>

스 니펫 확장

모든 화면 크기에서 가로 및 세로 div를 중심으로 한 간단한 예입니다.

답변

CSS :

html,
body {
    height: 100%;
}

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

HTML :

<div class="container">
  <div>
    example
  </div>
</div>

바이올린 예

답변

에서 부트 스트랩 4

하는 수평 차일을 중심으로 , 사용 부트 스트랩-4 클래스

justify-content-center

자녀를 세로 로 가운데에 맞추 려면 bootstrap-4 클래스를 사용하십시오.

 align-items-center

하지만 d-flex 클래스를 사용하는 것을 잊지 마십시오. 부트 스트랩 -4 유틸리티 클래스입니다.

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>
</div>

참고 : 이 코드가 작동하지 않으면 부트 스트랩 -4 유틸리티를 추가하십시오

답변

부트 스트랩 4 업데이트

이제 Bootstrap 4가 flexbox이므로 수직 정렬이 더 쉬워졌습니다. 전체 높이 flexbox div가 주어지면 my-auto상단 및 하단 여백까지도 가능합니다 …

<div class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
      <h1 class="display-3">Hello, world!</h1>
    </div>
</div>

http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center

부트 스트랩 4의 수직 중심

답변

CSS에서 아무것도 변경하지 않아도 클래스에서 직접 작성할 수 있으며 결과를 얻을 수 있습니다.

<div class="col-lg-4 col-md-4 col-sm-4 container justify-content-center">
  <div class="col" style="background:red">
    TEXT
  </div>
</div>

답변

디스플레이 테이블과 부트 스트랩없이, 오히려 그렇게 할 것입니다.

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

답변

좋은 답변 ppollono. 방금 놀고 있었고 약간 더 나은 해결책을 얻었습니다. CSS는 동일하게 유지됩니다.

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

그러나 HTML의 경우 :

<div class="container">
    <div class="vertical-center-row">
        <div align="center">TEXT</div>
    </div>
</div>

이것으로 충분합니다.