web-dev-qa-db-ja.com

中心から絶対要素を配置する方法-CSS

クライアントの場合、広告を含む本文の左側に絶対divをまとめる必要があります。これまでのところ、これを行う方法を理解した唯一の方法は、絶対divを作成することです。ここでの問題は、絶対位置のdivに黒いスペース（本体の端）があり、この「ガタースペース」広告でページをハグする必要があることです。

これを説明するための最良の方法は、これをページの中心から設定されたピクセル数だけ離して配置することです。私は次のコードでこれを行うことができると思いました：

position: absolute;
left:50%;
margin-right:500px;

ただし、これによりdivがページの中央に保持されます。ページの中央から絶対divを配置することは可能ですか？

csscss-position
19
Bob Cavezza

広告の幅がわかっている場合は、次のことができます。

position:absolute;
left:50%;
margin-left:-250px;
width:500px;

配置する要素の幅の半分である負のマージン左に注意してください

34
Mark Steggles

何かを中央に配置し、幅/高さの応答性を維持したい場合は、ビューポートユニットを使用できます ブラウザサポート

要素の幅、高さ、マージンをビューポート単位で設定することにより、他のトリックを使用せずに要素を中央に配置できます。

ここで、この長方形の高さは60vh、上下の余白は20vhで、合計で100vh（60 + 2 * 20）になるため、ウィンドウのサイズを変更しても常に中央に配置されます。

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

続きを読む ここ

3
Mark Steggles

固定幅でない場合は、次のことができます。

position: absolute;
left: 20%;
top: 20%;
height: 60%;
width: 60%;

証明 ここ 。

1
Linus Kleen

CSSで簡単にできます。すべての主要なブラウザでの作業

<style type="text/css">
    #outer{
        width:100%;
        height:250px;
        background:#232323;
        position:relative;
    }

    #inner{
        position:absolute;
        width:300px;
        height:200px;
        background:red;
        top:0;
        left:50%; /*Important*/
        margin:-150px; /* WIDTH/2 */
    }
</style>

<div id="outer">
    <div id="inner">
    </div>
</div>
1
Mifas

コンテナdivを中央に作成し、その中にdivを次のように配置できます。

<style type="text/css">
#container {
    position: relative;
    left:50%;
    padding-right:500px;
}
#left {
    position:absolute;
    left:-500px;
}

</style>

<div id="container">
    <div id="left">a</div>
</div>
0
István Ujj-Mészáros

必ずしも絶対位置を指定する必要はありません。ブロック要素のデフォルトのオーバーフロー動作を利用できます。たとえば、次のようなコードを使用して、目的の結果を得ることができます。

マークアップ：

<div id="adbox">
    <div class="content">
        <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh  odio, sollicitudin vel sodales vel, dignissim sed lacus. Praesent sed  erat sed turpis gravida congue. Nulla facilisi. Nunc eros eros, auctor  et auctor in, tempor quis magna. Curabitur in justo libero.</a>
    </div>
</div>
<div id="main-content">
    <p>Curabitur iaculis, dolor eu interdum fermentum, mi mauris vulputate est,  tempus rhoncus leo dolor nec orci. Duis a ante augue. Suspendisse  potenti. Proin luctus ultrices ligula, ac luctus lorem pellentesque non.  Curabitur sit amet eros dui, quis laoreet felis.</p>
</div>

スタイル：

#adbox {
    width: 400px;
    height: 0px;
    position: relative;
    z-index: 0;
    margin: 0 auto;
}
#adbox .content {
    background: #EEE;
}
#main-content {
    width:300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: #CCC;
}
#main-content p {
    padding: 0 5px;
}

IE警告：in IE <= 6 heightプロパティは他のブラウザと同じように解釈されますmin-height：この問題を修正するために、特定のスタイルを追加することをお勧めします。

または、広告を絶対に配置して次のようにすることもできます： http://jsfiddle.net/bssxg/10/

#adbox { width: 400px; position: absolute; z-index: 0; top: 0; left: 50%; margin-left: -200px; }

（左の負のマージンは広告ボックスの幅の半分に等しい）

0
Lucius

これはトリックを行います

.centered {
    //Assume image is 100 in height and 200 in width
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px; // applying a negative top margin of half the images height
    margin-left: -100px; // applying negative left margin of half the images width
}
0
Computernerd

2020年には、これを行う正しい方法はcalc()を使用することです。 centerプロパティはありません。位置決めはコーナーから行われます。したがって、最初に左または右から50%を使用して中心から位置を取得し、次に必要に応じて中心から値を追加または削除します。

したがって、leftを使用して中心から配置するには、これを使用します。ここでは中央の右側に500ピクセルを配置していますが、負の値（中央の左側）または他の単位を使用しても問題ありません（相対または固定）。

.example {
  left: calc(50% + 500px);
}

この例でrightプロパティを使用するには、次のようにします。

right: calc(50% - 500px);

参照：

0
Nigel B. Peck