中央の位置：固定要素
https://stackoverflow.com/questions/2005954
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
作りたいです position: fixed; ダイナミックな幅と高さで画面に中央にあるポップアップボックス。使った margin: 5% auto; このため。それなし position: fixed; 水平方向に細かく中心にありますが、垂直ではありません。追加した後 position: fixed;, 、水平に中心にありません。
これが完全なセットです：
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>このボックスをCSSで画面に集中するにはどうすればよいですか？
解決
基本的に設定する必要があります top と left に 50% divの左上コーナーを中央に配置します。また、設定する必要があります margin-top と margin-left Divの高さと幅の負の半分まで、中心をDivの中央にシフトします。
したがって、提供されたa <!DOCTYPE html> （標準モード）、これは次のとおりです。
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
または、IE6/7などの垂直や古いブラウザのセンタリングを気にしない場合は、代わりに追加することもできます。 left: 0 と right: 0 を持つ要素に margin-left と margin-right の auto, 、そのため、固定幅を持つ固定位置の要素が、左右のオフセットがどこから始まるかを知るようにします。したがって、あなたの場合：
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
繰り返しますが、これはIEを気にする場合にのみIE8+で機能します。これは、垂直ではなく水平方向にのみ中心です。
他のヒント
ダイナミックな幅と高さで画面の中心にあるポップアップボックスを作りたいです。
これは、動的な幅を持つ要素を水平に中心にするための最新のアプローチです - それはすべての最新のブラウザーで機能します。 ここでサポートを見ることができます.
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
垂直センターと水平の両方のセンタリングについては、以下を使用できます。
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
より多くのベンダーのプレフィックスプロパティを追加することもできます（例を参照）。
または追加するだけです left: 0 と right: 0 元のCSSには、通常の非固定要素と同様に動作し、通常の自動マージン技術が機能します。
.jqbox_innerhtml
{
position: fixed;
width:500px;
height:200px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
z-index:200;
margin: 5% auto;
left: 0;
right: 0;
}
注意してください有効な（x）htmlを使用する必要があります DOCTYPE IEで正しく動作するために（もちろん、とにかく持っているべきです..！）
次のようなコンテナを追加します：
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
その後、この箱をこのdivに入れて作業を行います。
追加するだけです：
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
このソリューションでは、ポップアップDivに幅と高さを定義する必要はありません。
そして、ポップアップのサイズを計算し、半分をトップにマイナスする代わりに、JavaScriptはPopUpContainerを変更して画面全体に記入しています...
（高さ100％、ディスプレイを使用するときは機能しません：テーブルセル;（垂直に何かを中心にするために必要です）...
とにかくそれは機能します:)
left: 0;
right: 0;
IE7で動作していませんでした。
に変更されました
left:auto;
right:auto;
動作し始めましたが、残りのブラウザでは動作が停止します！そのため、以下のIE7にこのように使用しました
if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
内部には、拡散幅、高さ、またはそれなしの任意の要素があります。すべてが中心です。
基本的にそれを別のものに包むことができます div そしてそれを設定します position に fixed.
.bg {
position: fixed;
width: 100%;
}
.jqbox_innerhtml {
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}<div class="bg">
<div class="jqbox_innerhtml">
This should be inside a horizontally and vertically centered box.
</div>
</div>これを使用する位置を修正するには： -
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
使った vw （ビューポート幅）と vh （ビューポートの高さ）。ビューポートは画面全体です。 100vw 画面は合計幅です 100vh 総高さです。
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
可能です 答え:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Center Background Demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div.centred_background_stage_1 {
position: fixed;
z-index:(-1 );
top: 45%;
left: 50%;
}
div.centred_background_stage_2 {
position: relative;
left: -50%;
top: -208px;
/* % does not work.
According to the
http://reeddesign.co.uk/test/points-pixels.html
6pt is about 8px
In the case of this demo the background
text consists of three lines with
font size 80pt.
3 lines (with space between the lines)
times 80pt is about
~3*(1.3)*80pt*(8px/6pt)~ 416px
50% from the 416px = 208px
*/
text-align: left;
vertical-align: top;
}
#bells_and_wistles_for_the_demo {
font-family: monospace;
font-size: 80pt;
font-weight: bold;
color: #E0E0E0;
}
div.centred_background_foreground {
z-index: 1;
position: relative;
}
</style>
</head>
<body>
<div class="centred_background_stage_1">
<div class="centred_background_stage_2">
<div id="bells_and_wistles_for_the_demo">
World<br/>
Wide<br/>
Web
</div>
</div>
</div>
<div class="centred_background_foreground">
This is a demo for <br/>
<a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
</a>
<br/><br/>
<a href="http://www.starwreck.com/" style="border: 0px;">
<img src="./star_wreck_in_the_perkinnintg.jpg"
style="opacity:0.1;"/>
</a>
<br/>
</div>
</body>
</html>
これを使用して、正しく中心にない水平要素に試してみてください。
幅：calc（幅：100％ - 幅他のものは何でもそれを中心にしています)
たとえば、サイドナビゲーションバーが200pxの場合：
width: calc(100% - 200px);
唯一の絶対確実な解決策は、次のようにテーブルAlign = centerを使用することです。
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
私は、これらの豊富な量を愚かな時間に無駄にして、Divを中心にするような根本的な問題を解決するために、世界中の人々を信じられません。 CSSソリューションはすべてのブラウザでは機能せず、jQueryソリューションはソフトウェア計算ソリューションであり、他の理由ではオプションではありません。
私はテーブルの使用を避けるために繰り返し時間を無駄にしましたが、それと戦うのをやめるように経験してください。センターリングにテーブルを使用します。すべてのブラウザで常に動作します！これ以上心配しないでください。
