CSS Twitter Bootstrap - 如何水平或垂直居中元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10088706/
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
Twitter Bootstrap - how to center elements horizontally or vertically
提问by itsme
is there any way to center html elements vertically or horizontally inside the main parents?
有什么方法可以在主要父项内垂直或水平居中 html 元素吗？
采纳答案by itsme
Update: while this answer was likely correct back in early 2013, it should not be used anymore. The proper solution uses offsets.
更新：虽然这个答案在 2013 年初可能是正确的，但不应再使用它。正确的解决方案使用 offsets。
As for other users suggestion there are also native bootstrap classes available like:
至于其他用户的建议，还有可用的本机引导程序类，例如：
class="text-center"
class="pagination-centered"
thanks to @Henning and @trejder
感谢@Henning 和@trejder
回答by m0000g
From the Bootstrap documentation:
来自Bootstrap 文档：
Set an element to
display: blockand center viamargin. Available as a mixin and class.
通过 将元素设置为
display: block并居中margin。可作为 mixin 和 class 使用。
<div class="center-block">...</div>
回答by cssyphus
For future visitors to this question:
对于此问题的未来访问者：
If you are trying to center an image in a div but the image won't center, this could describe your problem:
如果您尝试在 div 中居中图像但图像不会居中，这可能描述了您的问题：
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
The img-responsiveclass adds a display:blockinstruction to the image tag, which stops text-align:center(text-centerclass) from working.
的img-responsive类添加display:block到图像标签，其停止指令text-align:center（text-center从工作类）。
SOLUTION:
解决方案：
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
Adding the center-blockclass overrides the display:blockinstruction put in by using the img-responsiveclass.
添加center-block类会覆盖display:block使用img-responsive类放入的指令。
Without the img-responsiveclass, the image would center just by adding text-centerclass
如果没有img-responsive类，只需添加text-center类，图像就会居中
Update:
更新：
Also, you should know the basics of flexboxand how to use it, since Bootstrap4 now uses it natively.
此外，您应该了解flexbox的基础知识以及如何使用它，因为Bootstrap4 现在本机使用它。
Here is an excellent, fast-paced video tutorial by Brad Schiff
这是Brad Schiff的出色、快节奏的视频教程
Here is a great cheat sheet
这是一个很棒的备忘单
回答by Zim
Updated 2018
2018 年更新
In Bootstrap 4, the centeringmethods have changed..
在Bootstrap 4 中，居中方法发生了变化。
Horizontal Center in BS4
BS4 中的水平中心
text-centeris still used fordisplay:inlineelementsmx-autoreplacescenter-blockto centerdisplay:flexchildrenoffset-*ormx-autocan be used to center grid columns
text-center仍然用于display:inline元素mx-auto替换center-block为中心display:flex儿童offset-*或mx-auto可用于使网格列居中
mx-auto(auto x-axis margins) will center display:blockor display:flexelements that have a defined width, (%, vw, px, etc..). Flexbox is used by defaulton grid columns, so there are also various flexbox centering methods.
mx-auto（自动 x 轴边距）将居中display:block或display:flex具有定义宽度的元素，（%，vw，px，等...）。Flexbox 默认用于网格列，因此也有各种 flexbox 居中方法。
DemoBootstrap 4 Horizontal Centering
For vertical centering in BS4 seehttps://stackoverflow.com/a/41464397/171456
有关 BS4 中的垂直居中，请参阅https://stackoverflow.com/a/41464397/171456
回答by kirgiz_jigit
You may directly write into your css file like this :
您可以像这样直接写入您的 css 文件：
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}<div class = "content" >
<p> some text </p>
</div>回答by atabak
i use this
我用这个
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
回答by PersianMan
for horizontaly centering you can have something like this:
对于水平居中，你可以有这样的东西：
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
回答by xander-miller
I like this solution from a similar question. https://stackoverflow.com/a/25036303/2364401Use bootstraps text-centerclass on the actual table data <td>and table header <th>elements. So
我喜欢这个来自类似问题的解决方案。https://stackoverflow.com/a/25036303/2364401text-center在实际表数据<td>和表头<th>元素上使用引导程序类。所以
<td class="text-center">Cell data</td>
<td class="text-center">Cell data</td>
and
和
<th class="text-center">Header cell data</th>
<th class="text-center">Header cell data</th>
回答by alvseek
With bootstrap 4 you can use flex
使用 bootstrap 4，您可以使用 flex
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
source: bootstrap 4.1
来源：引导程序 4.1
回答by taoufiqaitali
bootstrap 4 + Flex solve this
bootstrap 4 + Flex 解决了这个问题
you can use
您可以使用
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>it should center centent horizontaly and verticaly
它应该水平和垂直居中
