Web中央レイアウト-水平中央

5471 ワード
Webレイアウト

中央のレイアウト


水平方向中央


要件:2つのコンテナがネストされ、幅が一定ではなく、小さなコンテナの大きなコンテナの水平中央位置を満たす

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> title>
    <style type="text/css">
        .parent{background-color: gray;width: 100%; height: 100px;}
        .child{background-color:orange; height:100%;}
    style>
head>
<body>
    <div class="parent">
        <div class="child"> div>
    div>
body>
html>

ソリューション1:inline-block+text-align


原理:サブコンテナをinline-blockに設定した後、幅は内容によって決まる.親コンテナのtext-alignが有効になります
.parent{text-align: center;}
.child{display: inline-block;}
  • の利点:互換性が良く、ie 6/7でdisplay:inline;zoom:1;で
    • を互換性があります.
  • 欠点:サブコンテナの内容が中央属性に継承されるため、サブコンテナに
    • を追加する必要がある.

    ソリューション2:table+margin


    原理:display:table;その後、容器の幅も内容によって決まる.margin:auto;中央に配置できます.
    .child{display:table;margin:auto;}

    利点:サブコンテナのみを設定し、ie 8+でサポートし、より低いバージョンで直接置き換えることができます.

    ソリューション3:absolute+transform

    .parent{position: relative;}
.child{position: absolute;left: 50%;transform: translateX(-50%);}
  • の利点:ドキュメントフローから離れ、他の要素に影響を及ぼさない
  • 欠点:ie低バージョン
    • と互換性がない

    ソリューション4:flex+justify-content


    原理:親要素がflexである場合、子要素はflex-itemになり、幅は内容によって決まる.justify—content:center;はflexモードで中央に位置することができる.
    .parent{display:flex;justify—content:center;}
  • の利点:親要素のみを設定し、justify-contentを設定する場合は、サブ要素にmargin
    • を設定することもできます.
  • 欠点:ie低バージョン互換性
    • fastjsonにおけるJSOnArrayとListの相互変換
    pyppeteeer js関数の位置決めパスの変化を実行するラベル