要素の水平方向および垂直方向の中央揃えを実現する CSS

韦小宝
リリース: 2017-11-17 11:55:35
オリジナル
1675 人が閲覧しました

私たちの実際のプロジェクトでは、

垂直方向の中央揃えの方法がたくさんあります。たとえば、モバイル ページには多くの ポップアップ プロンプト コンテンツがあり、それが皆さんのお役に立てれば幸いです。 たくさんのページを作成してきましたが、垂直方向のセンタリングの問題は常に存在していると感じています。いくつかの方法は比較的簡単ですが、いくつかは実際の状況に基づいて計算する必要があると感じています。私が実際に使用した方法は、最も包括的ではないかもしれませんが、実際の効果は依然として良好です。

くだらない話はやめて、コードに直接進みましょう:

/* 常用的三种方法 */

/* 第一种 */
div{
	width: 200px;
	height: 200px;
	margin: auto;
	background: pink;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* 第二种 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
}
/* 第三种 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
ログイン後にコピー

HTML 部分に直接アクセスして実装してください

関連する推奨事項:

CSS 制御のスクロール バー スタイルの分析

CSS3カスタムスクロール バースタイルの詳細例

CSS設定のdivスクロールバースタイルの例

以上が要素の水平方向および垂直方向の中央揃えを実現する CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート