ホームページ >ウェブフロントエンド >CSSチュートリアル >水平および垂直に絶対配置された要素を中央に配置する方法
水平および垂直に絶対配置された要素を中央に配置する方法
- 高洛峰オリジナル
- 2017-02-24 13:35:071332ブラウズ
この記事では主に、絶対配置された要素の水平方向と垂直方向の中央揃えの方法を紹介します。参考として、必要な友達は一緒に見てください
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>
注: 要素のサイズに関係なく、中央揃えにすることができます。ただし、この書き込み方法は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>
<!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 サイトに注目してください。