ホームページ  >  記事  >  ウェブフロントエンド  >  要素のサイズが不明な場合に CSS で垂直方向と水平方向の中央揃えを実現する方法 (コード)

要素のサイズが不明な場合に CSS で垂直方向と水平方向の中央揃えを実現する方法 (コード)

不言
不言オリジナル
2018-08-09 17:11:472587ブラウズ

この記事の内容は、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 優先度のコード例

ページ上の単語が多すぎる場合、 CSSを使って余分な部分を楕円で表示させてみませんか? (単一行/複数行のコードのデモ)

以上が要素のサイズが不明な場合に CSS で垂直方向と水平方向の中央揃えを実現する方法 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。