CSS 在引导响应式页面中如何将 div 居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20142606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In a bootstrap responsive page how to center a div
提问by Rama Priya
I need to create a responsive page using bootstrap by position a div at the centre of a page as like in the below mentioned layout.
我需要通过在页面中心放置一个 div 来使用引导程序创建一个响应式页面，就像下面提到的布局一样。
回答by ppollono
UPDATE for Bootstrap 4
Bootstrap 4 的更新
Simpler vertical grid alignement with flex-box
使用 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>Solution for Bootstrap 3
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>It's a simple example of a horizontally and vertically div centered in all screen sizes.
这是一个以所有屏幕尺寸居中的水平和垂直 div 的简单示例。
回答by vocasle
CSS:
CSS：
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
HTML:
HTML：
<div class="container">
<div>
example
</div>
</div>
回答by vocasle
In bootstrap 4
在引导程序 4
to center the childs horizontally, use bootstrap-4 class
到水平居中儿童的，使用自举-4类
justify-content-center
to center the childs vertically, use bootstrap-4 class
要垂直居中孩子，请使用 bootstrap-4 类
align-items-center
but remember don't forget to use d-flex class with these it's a bootstrap-4 utility class, like so
但请记住不要忘记使用 d-flex 类，它是一个 bootstrap-4 实用程序类，就像这样
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<div class="bg-primary">MIDDLE</div>
</div>
Note:make sure to add bootstrap-4 utilities if this code does not work
注意：如果此代码不起作用，请确保添加 bootstrap-4 实用程序
回答by Zim
Update for Bootstrap 4
Bootstrap 4 的更新
Now that Bootstrap 4 is flexbox, vertical alignment is easier. Given a full height flexbox div, just us my-autofor even top and bottom margins...
现在 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
http://codeply.com/go/ayraB3tjSd/bootstrap-4-vertical-center
回答by Jay
You don't need to change anything in CSS you can directly write this in class and you will get the result.
您不需要更改 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>
回答by Matoeil
without display table and without bootstrap , i would rather do that
没有显示表和引导程序，我宁愿这样做
<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;
}
回答by simranjazz
Good answer ppollono. I was just playing around and I got a slightly better solution. The CSS would remain the same, i.e. :
好的答案 ppollono。我只是在玩，我得到了一个稍微好一点的解决方案。CSS 将保持不变，即：
html, body, .container {
height: 100%;
}
.container {
display: table;
vertical-align: middle;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
But for HTML:
但对于 HTML：
<div class="container">
<div class="vertical-center-row">
<div align="center">TEXT</div>
</div>
</div>
This would be enough.
这样就足够了。
回答by Tarun Rawat
Not the best way ,but will still work
不是最好的方法，但仍然有效
<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>
回答by scysys
For actual version of Bootstrap 4.3.1 use
对于 Bootstrap 4.3.1 的实际版本使用
Style
风格
<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>
Code
代码
<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
回答by sanka sanjeeva
Try this, For the example, I used a fixed height. I think it is doesn't affect the responsive scenario.
试试这个，例如，我使用了一个固定的高度。我认为它不会影响响应式场景。
<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>