아래 언급 된 레이아웃과 같이 페이지 중앙에 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>

이것으로 충분합니다.

가장 좋은 방법은 아니지만 여전히 작동합니다.

<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-12"></div>
<div class="col-lg-12">
<div class="row h-100">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 border">
    This div is in middle
  </div>
  <div class="col-lg-4"></div>
</div>

</div>
<div class="col-lg-12"></div>
</div>

</div>

부트 스트랩으로 레이아웃을 수행하는 가장 간단한 방법은 다음과 같습니다.

<section>
<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 200px; background-color: blueviolet;">
                <div>
                    <h1 style="color: white;">Content goes here</h1>
                </div>
            </div>
        </div>
    </div>
</div>

내가 한 것은 div를 가운데에 배치 할 수있는 div 레이어를 추가하는 것이지만 백분율을 사용하지 않으므로 div의 최대 너비를 가운데로 지정해야합니다.

동일한 방법을 사용하여 둘 이상의 열을 중앙에 배치 할 수 있으며 div 레이어를 더 추가하기 만하면됩니다.

<div class="container">
    <div class="row">
        <div align="center">
            <div style="max-width: 400px; background-color: blueviolet;">
                <div class="col-md-12 col-sm-12 col-xs-12" style="background-color: blueviolet;">
                    <div class="col-md-8 col-sm-8 col-xs-12" style="background-color: darkcyan;">
                        <h1 style="color: white;">Some content</h1>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: blue;">
                        <p style="color: white;">More content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

참고 : md, sm 및 xs에 열 12가있는 div를 추가했습니다.이 작업을 수행하지 않으면 배경색이있는 첫 번째 div (이 경우 "blueviolet")가 축소되고 하위 div를 볼 수 있습니다 이지만 배경색은 아닙니다.

실제 버전의 Bootstrap 4.3.1을 사용하려면

스타일

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
html, body {
    height: 100%;
}
</style>

암호

<div class="h-100 d-flex justify-content-center">
<div class="jumbotron my-auto">
<!-- example content -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Title</h4>
<p>Desc</p>
</div>
<!-- ./example content -->
</div>
</div

예를 들어 고정 높이를 사용했습니다. 나는 그것이 반응 형 시나리오에 영향을 미치지 않는다고 생각합니다.

<html lang="en">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="d-flex justify-content-center align-items-center bg-secondary w-100" style="height: 300px;">
        <div class="bg-primary" style="width: 200px; height: 50px;"></div>
    </div>
</body>
</html>

Bootstrap 4에서 다음을 사용하십시오.

<div class="d-flex justify-content-center">...</div>

원하는 것에 따라 위치를 변경할 수도 있습니다.

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

여기 참조

다음은 중앙에 div를 넣는 간단한 CSS 규칙입니다.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

가장 간단한 해결책은 아래와 같이 양쪽에 하나의 빈 열을 추가하는 것입니다.

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>

jsFiddle

HTML :

<div class="container" id="parent">
  <div class="row">
    <div class="col-lg-12">text
      <div class="row ">
        <div class="col-md-4 col-md-offset-4" id="child">TEXT</div>
      </div>
    </div>
  </div>
</div>

CSS :

#parent {    
    text-align: center;
}
#child {
    margin: 0 auto;
    display: inline-block;
    background: red;
    color: white;
}