ホームページ > 記事 > ウェブフロントエンド > 絶対的に配置された要素を水平方向および垂直方向の中央に配置するための 3 つの方法
絶対的に配置された要素を水平方向および垂直方向の中央に配置するための 3 つの方法
- php中世界最好的语言オリジナル
- 2018-03-22 15:26:525624ブラウズ
今回は、要素を水平方向と垂直方向にセンタリングするための 3 つの 絶対配置方法を紹介します。絶対配置された要素の水平方向と垂直方向のセンタリングを実現するための 注意事項は何ですか?実際のケースを見てみましょう。
1.css はセンタリングを実装します
欠点: 要素の幅と高さを事前に知っておく必要があります。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
2. CSS3 は水平方向と垂直方向の中央揃えを実現します
注: 要素のサイズに関係なく、中央揃えにすることができます。ただし、この書き込み方法はIE8以降にのみ対応しており、モバイル端末では無視して構いません。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
3. マージン: センタリングを実現するための自動
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:
CSS3のwebkit-tap-highlight-color属性の使い方
以上が絶対的に配置された要素を水平方向および垂直方向の中央に配置するための 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：左側が固定、右側がアダプティブレイアウト次の記事：左側が固定、右側がアダプティブレイアウト