CSSメモ: page_html/css_WEB-ITnoseの真ん中にdivを置く方法-htmlチュートリアル-php.cn

CSSメモ: page_html/css_WEB-ITnoseの真ん中にdivを置く方法

WBOY

リリース： 2016-06-24 11:20:47

オリジナル

1658 人が閲覧しました

div をページの中央に配置する方法今日説明するのは、単純に上: 50%、左: 50% ではなく、div を水平方向と垂直方向に中央配置することです。もちろん、元のアイデアに従って書いてみましょう。上と左の属性を 50% に設定して、その効果を確認します。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div居于页面正中间</title>    <style type="text/css">        *{            margin: 0;            padding: 0;            background-color: #EAEAEA;        }        div{            width: 200px;            height: 200px;            background-color: #1E90FF;        }        .center-in-center{            position: absolute;            top: 50%;            left: 50%;        }    </style></head><body>    <div class="center-in-center"></div></body></html>

ログイン後にコピー

私のスクリーンショットからわかるように、div の左頂点は正確にページの中心点にあります。現在のアイデアは、最初に望んでいた結果を達成するために、div を移動して div の中心をページの中心と一致させる方法です。ここではcssのtransform属性を使った方法を紹介したいと思います。この属性には多くの値があるため、ここでは 1 つずつ紹介せず、その翻訳についてのみ説明します。 translation(0,-50%) を追加します

.center-in-center{    position: absolute;    top: 50%;    left: 50%;    transform: translate(0, -50%);}

ログイン後にコピー

この属性を以前に使用したことがある場合は、何が起こっているかがわかるはずです。 translation(0, -50%) の最初の値は水平方向の移動量を指し、tansform の translationX と同じ効果があります。2 番目の値は垂直方向のオフセットですが、負の値の場合は逆方向の移動を表します。方向。これで、div を水平方向と垂直方向の両方で中央に配置するには、tanslate(-50%,-50%) だけが必要になります。

完全なコードと効果を添付します:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div居于页面正中间</title>    <style type="text/css">        *{            margin: 0;            padding: 0;            background-color: #EAEAEA;        }        div{            width: 200px;            height: 200px;            background-color: #1E90FF;        }        .center-in-center{            position: absolute;            top: 50%;            left: 50%;            -webkit-transform: translate(-50%, -50%);            -moz-transform: translate(-50%, -50%);            -ms-transform: translate(-50%, -50%);            -o-transform: translate(-50%, -50%);            transform: translate(-50%, -50%);        }    </style></head><body>    <div class="center-in-center"></div></body></html>

ログイン後にコピー

さらにいくつかの言葉を加えます。これは面接での非常に良い質問にもなり得ます。注目してください。もちろん他の解決策もありますので、ここでは詳しく説明しません。さらに、CSS3 のトランスフォームは、3D 変換などの多くの優れた効果を実行できる非常に強力な属性です。興味がある場合は、詳しく学習してください。しかし、フロントエンドにはブラウザの互換性の問題があると言わざるを得ません。。。他のブラウザは問題ありませんが、IE では、IE9 は少数の属性をサポートしていますが、IE9 以下ではすべての属性をサポートしているわけではありません。まだ IE を深く愛している場合は、別の方法を見つけるしかありません。js を使用して解決することもできます。もうすぐ週末ですが、またぐっすり眠れると嬉しいです！