ホームページ > 記事 > ウェブフロントエンド > 要素のサイズが不明な場合に CSS で垂直方向と水平方向の中央揃えを実現する方法 (コード)
要素のサイズが不明な場合に CSS で垂直方向と水平方向の中央揃えを実現する方法 (コード)
- 不言オリジナル
- 2018-08-09 17:11:472546ブラウズ
この記事の内容は、CSS でサイズが不明な要素の垂直方向と水平方向のセンタリング (コード) を実現する方法についてです。必要な方は参考にしていただければ幸いです。
アイデア: 子要素を上から 50%、左から 50% の絶対位置に配置し、css3 のtransform:translate(-50%; -50%) を使用します
利点: ハイエンド、Webkit で使用可能-ベースのブラウザ
短所: IE9 未満では、transform 属性はサポートされていません
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
position: relative;
height:300px;
width: 300px;
background: #FD0C70;
}
.parent3 .child{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<p class="parent3">
<p class="child">hello world-3</p>
</p>
</body>
</html>関連する推奨事項:
ページ上の単語が多すぎる場合、 CSSを使って余分な部分を楕円で表示させてみませんか？ (単一行/複数行のコードのデモ)
以上が要素のサイズが不明な場合に CSS で垂直方向と水平方向の中央揃えを実現する方法 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。