button {
  margin: 0 auto;
  width: fit-content;
  display: block;
}
// container should have set width (for example 100%)

最好的方法是使用CSS3。

旧盒子模型(重定向)

显示:盒子和其属性盒子包、盒子平行、盒子东方、盒子方向等已被 flexbox 替换,虽然它们可能仍然工作,但不建议在生产中使用。

#outer { 宽度: 100%; /* Firefox */ 显示: -moz-box; -moz-box-pack:中心; -moz-box-align:中心; /* Safari 和 Chrome */ 显示: -webkit-box; -webkit-box-pack:中心; -webkit-box-align:中心; /* W3C */ 显示: 盒子; 盒子包:中心; 盒子包:中心; } #inner { 宽度: 50%; } <div id="outer"> <div id="inner">Foo foo</div> </div>

根据您的可用性,您也可以使用盒子方向、盒子灵活、盒子方向特性。

现代盒子模型与Flexbox

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

阅读更多关于专注于儿童元素

链接2 链接3 链接4

这解释了为什么盒子模型是最好的方法:

為什麼W3C盒子模型被認為更好?

<div class="container">
<div class="res-banner">
<img class="imgmelk"  src="~/File/opt_img.jpg" >
</div>
</div>

CSS 代码

.res-banner{
        width:309px;
        margin: auto;
        height:309px;
    }

最简单的方式:

#outer { 宽度: 100%; 文本平衡:中心; } #inner { 边缘:自动; 宽度: 200px; } <div id="outer"> <div id="inner">Blabla</div> </div>

这就是你想要的最短的方式。

JSFIDDLE

#outer {
  margin - top: 100 px;
  height: 500 px; /* you can set whatever you want */
  border: 1 px solid# ccc;
}

#inner {
  border: 1 px solid# f00;
  position: relative;
  top: 50 % ;
  transform: translateY(-50 % );
}

添加文本:中心;到 parent div

#outer {
    text-align: center;
}

HTTPS://jsfiddle.net/7qwxx9rs/

或

#outer > div {
    margin: auto;
    width: 100px;
}

HTTPS://jsfiddle.net/f8su1fLz/