網頁中的中心徽標（垂直和水平）

Question

我有一個徽標（775 X 225），我想在網頁中居中（垂直和水平），然后在其下面放置一個“回車”鏈接

<html>
<head>
 <Title> My website </Title>
 <style type="text/css">
   //centerlogo CSS class here ?
 </style>
</head>
<body lang=EN-US>
<div class'centerlogo"> <span></span>
<img src="images/logo.jpg">
</div>
</body>
</html>

這樣做的最佳方法是什么，使它在垂直和水平方向都居中，適用於所有瀏覽器？

有人可以告訴我CSS類，如果它是最好的方法 - 或javascript代碼，如果它是最好的方法？

我試着看一下這里的幾個例子，但是無法讓它們與我的圖像一起工作。

謝謝

Answer 1

由於徽標是已知尺寸，因此您可以絕對定位，負邊距等於寬度和高度的一半。

.centerlogo {
    position: absolute;
    width: 775px;
    height: 225px;
    top: 50%;
    left: 50%;
    margin-left: -387px; //Half the width
    margin-top: -112px; //Half the height
}

無論窗口大小如何，這都將保留在屏幕的正中央。

Answer 2

在您想要居中的項目上執行類似的操作。
以下是輸出的示例： http ： //jsfiddle.net/FjLQY/1/

img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 128px; /* height of item */
    height: 128px; /* width of item */
}

網頁中的中心徽標（垂直和水平）

問題描述

2 個解決方案

解決方案1
3 已采納 2013-04-26 20:09:27

解決方案2
-1 2013-04-26 20:09:27

網頁中的中心徽標（垂直和水平）

問題描述

2 個解決方案

解決方案1 3 已采納 2013-04-26 20:09:27

解決方案2 -1 2013-04-26 20:09:27

解決方案1
3 已采納 2013-04-26 20:09:27

解決方案2
-1 2013-04-26 20:09:27