真のセンターCSS divクロスブラウザを、例えば、保持ページ内で使用するには、どうすればできますか？真のセンター縦横のCSS部門
私は、この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）とない派生：widthとheightのため（のようなautoまたは30%）の値を。
私はこれが一番うまくいくと思います。他のサイズも再計算する必要はなく、コンテンツのサイズを変更しても機能します – 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を使用できます。
<div style="display: table-cell; vertical-align: middle; height: 200px;">
Centered Text
</div>
なぜ「margin：0 auto'は十分ではないのですか？ – meagar
@meagar：これは、垂直方向ではなく水平方向にのみ集中します。 – icktoofay
ああ。質問は、実際には、その要素が要素を垂直方向に中心に置くことであることを示すべきです。 – meagar