居中图像垂直和水平
我倾向于在我设计的每一个网站上都这样做，但我还没有真正找到一个真正的好方法来做到这一点。 一家公司通常会给我他们的徽标，我会将它置于屏幕中间，以便在您进入页面时自动将您转到主页。 我似乎无法找到一种很好的方式来在屏幕中间没有一堆表格和div的情况下将图像居中！ 有什么好的建议？
你可以尝试在你的HTML中使用div ，像这样：
<div id='dv'></div>
并使用像这样的背景图像：
#dv {
background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
background-position: center;
}
html,body,#dv { /* so that the #dv can fill up the page */
width:100%;
height:100%;
}
小提琴
就我个人而言，我喜欢使用display: table-cell方法。
例如，如果我的HTML是：
<div class="wrapper">
<img src="http://placehold.it/150x50" alt="Company ABC" />
</div>
那么我的CSS应该是：
div.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 600px;
height: 200px;
}
如果我无法使用上述方法，另一个可行的选择是使用line-height属性。
线高度方法的HTML：
<div class="wrapper">
<img src="http://placehold.it/150x50" alt="Company XYZ" />
</div>
用于行高方法的CSS：
img {
line-height: 300px;
}
您可以使用JavaScript来计算中心点并将其放在边界或顶端（位置：相对/绝对），但这并不是很干净。
我假设你正在谈论一个启动页面，所以这里是一个简单的例子（尽管在其他情况下，我不建议像我这样做修改body标签）：
<!doctype html>
<html>
<head>
<title>blah</title>
<style type="text/css">
html,body {margin:0;padding:0;width:100%;height:100%;}
body {display:table;}
p {display:table-cell;text-align:center;vertical-align:middle;}
</style>
</head>
<body>
<p>Hello World - This could have an image in it</p>
</body>
</html>
技巧是在CSS中：
display:table-cell display:table text-align:center声明）和垂直vertical-align:middle （ vertical-align:middle声明） text-align和vertical-align属性仅以这种特殊方式工作，因为元素显示为table-cell