Div部を中央に保つ

Question

このdivをページの中央に配置する方法を教えてください。また、divのサイズを変更する方法は？

HTML：

<div id="Text"> 
    <p id="InsideT"> 
    Hello 
    </p> 
    </div> 

CSS：

#Text{ 
    position: absolute; 
    width: 50%; 
    font-size: 60px; 
    text-align: center; 
    color: black; 
    height: 50%; 
    display: inline-block; 
    transform: translateY(-50%); 
    top: 50%; 
    margin: 0 auto; 
    color: black; 
    right: 320px; 
    background: white; 

Answer 1

使用絶対位置、およびdivを中央に変換します。ウィンドウのサイズがdivより小さくなるまで、寸法は重要ではありません。あなたはそれを周りに移動し、それを中央しようとする

top: ; 
bottom: ; 
right: ; 
left: ; 

を使用することができます

position: fixed; 

を設定する必要が

.centred { 
 
    height: 50px; 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 200px; 
 
}

<div class="centred">I am in the centre of the page</div>

Answer 2

。固定位置では、スクロールしてもdivがそのまま保持されます。

この情報が役に立ちましたら幸いです。

Answer 3

divをDOM構造体から取り出した絶対位置を指定します。削除して問題を修正しました。

HTML：

<div id="Text"> 
    <p id="InsideT"> 
    Hello 
    </p> 
</div> 

CSS：

#Text { 
    width: 50%; 
    font-size: 60px; 
    text-align: center; 
    color: black; 
    height: 50%; 
    transform: translateY(-50%); 
    margin: 0 auto; 
    color: black; 
    background: white; 
} 

Answer 4

あなたは<div>水平margin: 0 autoとを合わせすでにです。自動余白は、block-level elementであるため、<div>を集中管理します。ただし、position: absolute、right: 320px、top: 50%、transform: translateY(-50%)など、この調整を破る追加のコードセクションをいくつか適用しています。

水平センタリングは、単にmargin: 0 autoとtext-align: centerで達成することができます：

#Text { 
 
    font-size: 60px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
}

<div id="Text"> 
 
    <p id="InsideT"> 
 
    Hello 
 
    </p> 
 
</div>

垂直センタリングはもう少し複雑であり、それはflexboxで水平方向と垂直方向の両方のセンタリングを達成するための最も簡単ですdisplay: flex,align-items: center、およびjustify-content: centerのプロパティ値を使用します。あなたもheightプロパティを指定する必要がありますことに注意してください：

#Text { 
 
    height: 180px; 
 
    border: 5px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div id="Text"> 
 
    <p id="InsideT"> 
 
    Hello 
 
    </p> 
 
</div>

・ホープ、このことができます！ :)

Answer 5

実際のページのX、Y中心を意味している場合、これは機能します。

#Text{ 
    font-size: 60px; 
    color: black; 
    display: inline-block; 
    background: white; 
    margin: 50%; 
} 

Answer 6

要素をページの中央に配置するには絶対位置を使用する必要があります。 CSSのtransformプロパティを使用してください。コードの下を参照してください：

.centerdiv{ 
 
    width: 200px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    margin: 0 auto; 
 
    transform: translate(0, -50%); 
 
    text-align: center; 
 
}

<div class="centerdiv">centered element</div>