Css 图像的水平对齐

我正试图将一个大图像水平居中。因为我使用的是HTML5，所以我不能使用

。我可以使用

left:400px

，但这对不同的屏幕尺寸不起作用。

使用CSS

文本对齐：居中。别忘了在div上设置宽度，否则它看起来会左对齐

  <div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>

居中
将图像包裹在元素内，并使用
文本对齐：居中


如果您的
元素
具有
宽度
属性，则为其指定
边距：auto
尝试使用此css水平居中

display: block;    
margin: 0 auto;

=上下页边距
0
，以及左右页边距
auto
，根据您的具体情况，这在几个项目中对我有效：

<style>
    .outer{float: left; position: relative; left: 50%;}
    .inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
     <div class="inner">content you want to center, image, text, whatevs</div>
</div>


.outer{浮动：左；位置：相对；左：50%；}
.内部{浮动：左；位置：相对；左：-50%；}
要居中放置的内容、图像、文本等
默认情况下，IMG元素是内联的。因此，正如其他人所指出的，您有两个选择：

1） 保持内联，并使用
文本对齐：居中

2） 使用
display:block将其设置为块元素，然后使用
边距：自动，仅适用于块元素。我认为这个解决方案更好。设置宽度只是将其强制为块元素的另一种方式，但对于以后可能阅读代码的人来说，这并不明显。因此，显式地将
显示
类型设置为
块
对于可读性更好。
有一种稍微不同的方法，即左对齐和左对齐以相同的方式一起工作（实际上是相互对立的），但它需要设置图像大小的精确一半，这在某些情况下不起作用。我不知道是谁投的票。。但这是完全错误的，
img
默认为内联元素，不能使用
margin:0 auto到中心it@Mr.Alien这对我有用。因为您使用的是display block:），所以从中选取了一个示例，并且您在回答中没有提到应该在哪里使用
display:block为了工作：）@Mr.Alien抱歉。我应该加进去的。谢谢你指出我的错误。我会更新我的答案。是的，即使我已经用过了，所以我提到了：）非常感谢你，你做得很好。错。
center
标记将起作用，它不再具有语义。HTML5贬低了标签，这是一个很好的理由。带有“display:block；”和“margin:auto；”的替代解决方案对我来说效果很好。从Praveen的回答来看，似乎不需要
width
。
display: block;    
margin: 0 auto;

<style>
    .outer{float: left; position: relative; left: 50%;}
    .inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
     <div class="inner">content you want to center, image, text, whatevs</div>
</div>