ホームページ > 記事 > ウェブフロントエンド > 要素のサイズが不明な場合に CSS で垂直方向と水平方向の中央揃えを実現する方法 (コード)
この記事の内容は、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 サイトの他の関連記事を参照してください。