ฉันต้องการสร้างเพจที่ตอบสนองโดยใช้ bootstrap โดยวางตำแหน่ง div ที่กึ่งกลางของเพจดังเช่นในรูปแบบที่กล่าวถึงด้านล่าง

อัปเดตสำหรับ Bootstrap 4

การจัดแนวตารางแนวตั้งที่เรียบง่ายขึ้นด้วย Flex-box

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

โซลูชันสำหรับ Bootstrap 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>

เป็นตัวอย่างง่ายๆของการแบ่งกึ่งกลางแนวนอนและแนวตั้งในทุกขนาดหน้าจอ

CSS:

html,
body {
    height: 100%;
}

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

HTML:

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

ตัวอย่างซอ

ในbootstrap 4

เพื่อให้เด็กอยู่กึ่งกลางแนวนอนใช้คลาส bootstrap-4

justify-content-center

เพื่อให้เด็กอยู่กึ่งกลางในแนวตั้งให้ใช้คลาส bootstrap-4

 align-items-center

แต่อย่าลืมใช้คลาส d-flex ด้วยสิ่งเหล่านี้เป็นคลาสยูทิลิตี้ bootstrap-4 เช่นนั้น

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

หมายเหตุ:อย่าลืมเพิ่มยูทิลิตี้ bootstrap-4 หากรหัสนี้ใช้ไม่ได้

อัพเดตสำหรับ Bootstrap 4

ตอนนี้ Bootstrap 4 เป็นเฟล็กบ็อกซ์แล้วการจัดตำแหน่งแนวตั้งก็ง่ายขึ้น ให้ความสูงเต็ม 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

ศูนย์กลางแนวตั้งใน Bootstrap 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>

ไม่มีตารางแสดงผลและไม่มี bootstrap ฉันอยากจะทำอย่างนั้น

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

ฉันคิดว่าวิธีที่ง่ายที่สุดในการสร้างเลย์เอาต์ด้วย bootstrap มีดังนี้:

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

หมายเหตุ: ฉันเพิ่ม div ด้วยคอลัมน์ 12 สำหรับ md, sm และ xs ถ้าคุณไม่ทำสิ่งนี้ 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>

อ้างอิงที่นี่

body{
    height: 100vh;
} 
.container{
    height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container text-center d-flex align-items-center justify-content-center">
        <div>
            <div>
                <h1>Counter</h1>
            </div>
            <div>
                <span>0</span>
            </div>
            <div>
                <button class="btn btn-outline-primary">Decrease</button>
                <button class="btn btn-danger">Reset</button>
                <button class="btn btn-outline-success">Increase</button>
            </div>
        </div>
    </div>

คุณสามารถทำเช่นนั้นได้

นี่คือกฎ CSS ง่ายๆที่วาง div ไว้ตรงกลาง

.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;
}