怎樣才能創建一個真正的中心CSS div跨瀏覽器，例如在保存頁面中使用？True Center垂直和水平CSS Div
我已經試過這個2007個CSS技巧 - How To Center an Object Exactly In The Center但你可以從我的代碼JSFiddle它不是100％的中心看。
HTML：
<div class="center">
<p>Text</p>
</div>
CSS：
.center{
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
border:5px solid black;
}
也就是說技術需要該元件具有固定的寬度和高度。你沒有設置寬度和高度。根據您的邊框和邊距，將其居中，寬度需要爲190像素，高度需要爲90像素。使用line-height和text-align結合固定的寬度和高度使文本和邊框居中。 Try it.
CSS
.center{
position: fixed;
top: 50%;
left: 50%;
width: 190px;
height: 90px;
line-height: 90px;
text-align: center;
margin-top: -50px;
margin-left: -100px;
border:5px solid black;
}
<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>
例如
<!DOCTYPE html>
<html>
<body>
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div>
</body>
</html>
這是我做過什麼
<html>
<head>
<title>Page Title</title>
<style>
.center { margin:auto; width:500px; background-color:green; }
</style>
</head>
<body>
<div class="center">
<p>Help me please</p>
</div>
</body>
</html>
希望這會有所幫助。
你可以用純CSS做到這一點：
html {
width: 100%;
height: 100%;
}
body {
min-width: 100%;
min-height: 100%;
}
div.centeredBlueBox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 200px;
background-color: blue;
}
它具體落實是非常重要的（如：300px），而不是得到的（如：auto或30%）爲width和height值。
我認爲，這效果最好。它仍然可以調整內容大小，而無需重新調整其他大小 – BananaAcid
這是我的解決方案：
<div style="position: absolute; left: 50%; height: 100%;">
<div style="position: relative; left: -50%; display: table; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
//your content here
</div>
</div>
</div>
它工作在很多瀏覽器。佈局後添加的內容沒有問題。
這是一個額外的例子，我爲IE垂直對齊創建了一個高度設置器。額外的跨度有一個垂直對齊：中間。
<style type="text/css">
html, body {
margin: 0;
padding: 0;
overflow:hidden;
text-align:center;
}
html, body{
height: 100%;
}
#loginContainer {
margin: 0 auto;
display: table;
min-width:300px;
text-align:left;
height: 85%; /* vertical align not exact in the middle */
}
#loginContainer .label{
width: 25%;
float:left;
white-space:nowrap;
line-height:20px;
}
#loginContainer h2{
border-bottom:2px solid #B4C3E1;
border-width:0 0 3px;
padding:2px 4px;
}
.mainHeader {
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
font-size:2em;
white-space:nowrap;
}
.detailsText {
border-top:1px solid #F60;
margin-top:5px;
clear:both;
}
/* layout horizontal and vertical */
.horizontalBox {
display: table-cell;
vertical-align: middle; /* not seen by IE6-7 */
height: 100%;
white-space: nowrap;
}
.verticalBox {
padding: 55px 0 0 0; /* 55px height of logo */
}
.rightText {
text-align:right;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#loginContainer {
width:300px; /* minimum width */
}
.horizontalBox {
text-align: center;
}
.verticalBox, .heightSetter {
display: inline-block;
vertical-align: middle;
text-align: left;
zoom:1;
}
.heightSetter {
height: 100%;
}
.verticalBox {
display: inline;
height: 0;
}
.heightSetter {
width: 1px;
}
</style>
<![endif]-->
<div class="mainHeader">This is the Header content</div>
<div id="loginContainer">
<div class="horizontalBox">
<div class="verticalBox">
<h2>My header of the vertical box</h2>
<p>My Content</p>
</div>
<span class="heightSetter"></span>
</div>
</div>
看一看this;相當聰明的文章。
將display類型的DIV設置爲table-cell。然後，您可以使用正常的vertical-align，就像TD元素一樣。
<div style="display: table-cell; vertical-align: middle; height: 200px;">
Centered Text
</div>
爲什麼'margin：0 auto'不夠好？ – meagar
@meagar：只能水平居中，而不能垂直居中。 – icktoofay
啊。問題確實應該表明其目的是*垂直*居中元素。 – meagar