Html 简单地将一个对象与 css 居中并且没有 hacks
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14883805/
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
Simple center a object with css and no hacks
提问by Caspert
I want to center an object using CSS and no hacks, is this possible and how?
我想使用 CSS 将对象居中而不使用 hacks，这可能吗？如何实现？
I have tried this, but than my p tag is gone.
我试过这个，但我的 p 标签不见了。
.centered {
position: fixed;
top: 50%;
left: 50%;
}
回答by CharlieM
There's several ways to center an element. But it depends on what your element is and how we choose to display it:
有几种方法可以使元素居中。但这取决于您的元素是什么以及我们选择如何显示它：
If you have
{display:inline; }This is simple. You can just use "text-align: center;" to center text, images and divs.
If you have
{display:block;}This is a bit more difficult. It depends on how your object is positioned. Your object could be relative, absolute, or fixed.
If it is relative; then you can use
"margin:0 auto;", however you will require a width value.If it is absolutely positioned, then you need to specify your
"top:"and"left:"values. You'll also need a width. If you know the width of the element, the best way is to use{left:50%; margin-left:-X}, where X = 1/2 the width of the element.
如果你有
{display:inline; }这很简单。您可以只使用“文本对齐：居中；” 使文本、图像和 div 居中。
如果你有
{display:block;}这有点困难。这取决于您的对象如何定位。您的对象可以是相对的、绝对的或固定的。
如果是相对的；那么您可以使用
"margin:0 auto;"，但是您将需要一个宽度值。如果它是绝对定位的，那么您需要指定您的
"top:"和"left:"值。您还需要一个宽度。如果您知道元素的宽度，最好的方法是使用{left:50%; margin-left:-X}，其中 X = 元素宽度的 1/2。
回答by daGUY
HTML:
HTML：
<div>Centered</div>
CSS:
CSS：
div {
margin: 0 auto;
width: 200px;
}
Live example: http://jsfiddle.net/v3WL5/
现场示例：http: //jsfiddle.net/v3WL5/
Note that margin: 0 auto;will only have an effect if the divhas a width.
请注意，margin: 0 auto;只有具有div宽度时才会产生效果。
回答by Sinan ?ALI?KAN
Use this for general purposes. Even span or div which is inside whatever :
将此用于一般目的。甚至 span 或 div 都在里面：
width:inherit; display:block;margin:0 auto;
回答by Mikhail Vladimirov
Use margin: autolike this:
margin: auto像这样使用：
margin: 0px auto
回答by 538ROMEO
late into the game, but have you tried with display:flexon the parent ?
游戏后期，但你有没有试过display:flex在父母身上？
I have a useful class that is simpleand works with all type of elements:
我有一个有用的类，它很简单，适用于所有类型的元素：
/* apply this on the parent */
.center {
display:flex;
align-items: center; /*vertical alignement*/
justify-content: center; /* horizontal alignement*/
}
This is relatively new but supported at ~98% of major browsers.
这是相对较新的，但支持约 98% 的主要浏览器。
However I suggest that you learn a bit about flexBox, it may seem complicated at first but it is very powerful for all type layouts !
不过我建议你学习一下 flexBox，它起初可能看起来很复杂，但它对于所有类型的布局都非常强大！
回答by user3152769
Usage :
用法 ：
- In-Line usage : Content goes here....
CSS Code :
#text-align { text-align:center }
- 内嵌用法：内容放在这里....
CSS 代码：
#text-align { text-align:center }
HTML Code :
HTML代码：
<div id="text-align">Content goes here....</div>
<div id="text-align">Content goes here....</div>
http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx
http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx
回答by dan
if you don't need to be position:fixed; you can just use
如果你不需要位置：固定；你可以使用
<center>
Hello
</center>
This is deprecated in HTML5
这在 HTML5 中已被弃用
