在CSS中居中图像

Question

我无法弄清楚如何在移动网站上将此图片居中。

这是我正在使用的代码，我是CSS的初学者，所以我确定这是一个简单的解决方法。 只需要一些帮助。 谢谢

#emotion-header-img {
    display:none;
}
#emotion-header {
    height:100px !important;
    background-image:url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png") !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
}

Answer 1

假设您也希望元素在水平和垂直方向上居中：

/* generated from howtocenterincss.com, personally tried and tested! */

 #emotion-header { display:flex; justify-content:center; align-items:center; /* height:100px !important; no need for this if you don't want to limit size*/ background-repeat:no-repeat !important; background-size:contain !important; } #emotion-header-img { height: 100px; } 

 <div id="emotion-header"> <img id="emotion-header-img" src="http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png" alt="image header" \\> </div> 

当然，还有许多其他可能性，当您想添加对IE7或IE8等旧浏览器的支持时， 事情会变得复杂 。 在IE11之前的任何版本上，您都需要使用表格单元格。 上面的代码段适用于IE11和现代浏览器。

当尝试在CSS中居中时 ，我发现了一个相关且很好的资源 ，它是howtocenterincss.com ，它会根据您的设置和选择为您生成正确的CSS。 实际上，与Web应用程序的名称相反，它也可以处理各种对齐方式。 请注意，生成的代码将通过<style>标签嵌入HTML元素中，您可以提取这些style标签中的所有内容并将其移至CSS文件中使用。

Answer 2

所以您的意思是要对齐background-image ？ 如果正确，则可以使用background-position 。 例：

 #emotion-header { width: 200px; height: 200px; border: 1px solid #ddd; background-image: url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png"); background-size: 100px; background-repeat: no-repeat; background-position: center; } 

 <div id="emotion-header"></div>