css - CSS を使用してビューポートの垂直中央に配置

Question

<div>Javascript (純粋な HTML と CSS のみ) に頼らずに、ビューポート (ブラウザーウィンドウ) でa を垂直方向に中央揃えしようとしています。いくつかの制約があります。

は、ビューポートの垂直方向のdiv中央に配置する必要があります。<div>私が見たメソッドは、私が望むものではない、別の内部のセンタリングのみをサポートしています。
の高さdivは不明。

その他の制約:

これにより、私が望むものに近づきますが、正確ではありません:

#nav {
    position: fixed;
    right: 0;
    top: 50%;
}

ただし、ナビの上部はナビの真ん中ではなく真ん中にあります。

divこれらの制約を中心に置くことができるテクニックはありますか?

score 0 · Accepted Answer

最も簡単な方法は、a を使用しないことです。1 つの行と 1 つのセルでdivaを使用します。table垂直方向の配置は、CSS ではひどくサポートされていないため、それを達成するために、壁や天井を横切ってコーディングする必要があります。

私は、今提案した内容に対するセマンティックな議論を理解しています。私はほとんどの場合、セマンティックマークアップの支持者です。ただし、適切な仕事には適切なツールを使用することも重要だと考えています。この場合、機能するシンプルなソリューションのために、少し純度を犠牲にするのが最善だと思います.

4 に答える 4