我想在图像上居中垂直引导按钮，我这样做：
http://jsfiddle.net/fhd031hf/
我使用margin-top:-200px，这是真的还是有其他更好的方法？
【问题讨论】：
标签： twitter-bootstrap css twitter-bootstrap-3 vertical-alignment
我注意到关于你的小提琴的几件事：
1.) 您没有正确地为引导程序提供资源。您已获得 .css 文件的资源，但缺少 .js 文件。
2.) 您的 div 结构绝不表明您正在使用引导程序。 Bootstrap 有一些类，您必须将这些类归于 div 才能使 bootstrap 正常工作。这是使用引导程序的入门链接。 Bootstrap Getting Started.
看看我为你制作的这个小提琴。我没有使用 html img 标签，而是使用带有背景图像的 div。将该 div 设置为相对位置，将该 div 内的按钮设置为绝对位置，无论屏幕分辨率如何，它都允许按钮准确地停留在图像的中心。
唯一的缺点是您需要为按钮指定高度。除此之外，我一直使用这种方法，它没有给我带来任何问题。
.center-block.img-responsive {
background: url('http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
height: 500px;
}
.btn.btn-default {
position: absolute;
width: 100px;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 40px;
margin: auto;
}
【讨论】：
src="@Url.Content(item.GoodImage.ToString())"控制它，它工作正常，但我不知道如何将其更改为div中的背景图像
@Url.Content()。 here。编辑：对不起，我无法提供更多帮助。祝你在项目中好运。
如您所见，您的方法可行，但您可以/应该使用位置相对和绝对样式。当其他人或您自己必须稍后再查看代码时，它们会更直观。
要达到您想要的结果，您必须将 position: relative 添加到包含的 div 和 position: absolute;顶部：200 像素；到按钮。
<div style="position: relative">
<img style="width:100% ; height:400px;" class="center-block img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
<button style="position: absolute; top: 200px" type="button" class="btn btn-default ">TitleText</button>
</div>
http://jsfiddle.net/fhd031hf/2/
编辑： 看到您正在为图像使用响应式类，请考虑到当屏幕解决方案小于原始图像时，这两种方法都会破坏设计。
【讨论】：