可変の幅と高さで div の垂直方向と水平方向の中央揃えを実現する CSS3 のtransform属性の詳細な紹介

transform

transform propertyの役割 2D または 3D 変換を要素に適用します。このプロパティを使用すると、要素の回転、拡大縮小、移動、または傾斜を行うことができます。 (w3cschool)

変換の互換性

変換の互換性はまだ比較的楽観的です。 IE9 より下では互換性がありません。IE9 は代替の -ms-transform 属性をサポートしますが、2D 変換のみをサポートします。

Google と Safari は、代替の -webkit-transform 属性をサポートしています。 IE9以降、FirefoxおよびOpenと互換性があります。

実際のプロジェクトでは、p の幅と高さの可変、垂直方向と水平方向のセンタリングの問題に必ず遭遇すると思います。以前jsを使って実装した記憶があります。

実はCSSで実装する方法はいくつかあります。ただ、個人的にはtransformを使った方が簡単で便利だと思いますが、IE9以下のブラウザには対応していません。

最近のプロジェクトでの応用例をご紹介します

カルーセル画像を書く際、画像の数に基づいてドットボタンの数が決まります。したがって、コードを記述する際には、これらのボタン要素の幅を固定することはできず、中央に表示する必要があります。

       <p class="scroll">
            <p class="scroll_pic">
                <a href="#"><img src="/static/imghwm/default1.png"  data-src="img/pic1.jpg"  class="lazy"   alt=""/></a>
                <a href="#"><img src="/static/imghwm/default1.png"  data-src="img/pic2.jpg"  class="lazy"   alt=""/></a>
                <a href="#"><img src="/static/imghwm/default1.png"  data-src="img/pic3.jpg"  class="lazy"   alt=""/></a>
                <a href="#"><img src="/static/imghwm/default1.png"  data-src="img/pic.jpg"  class="lazy"   alt=""/></a>
            </p>
            <ul>
                <li class="scroll_in"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </p>

.scroll {
    width: 720px;
    height: 410px;
    margin: 0 auto;
    margin-top: 100px;
    overflow: hidden;
    position: relative;
}.scroll ul {
    padding: 10px 0px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    bottom: 0px;
    left: 50%;
}.scroll ul li {
    float: left;
    margin: 0px 5px;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border:1px #73B613 solid;
    background: #FCBE47;
    box-sizing: border-box;    
}.scroll ul li.scroll_in{
    background:#FF6600;
}

上の例では、これらのボタンは ul 要素でホストされており、ul 要素には固定の幅と高さがありません。変換を記述しないでください。中央に配置されていない場合、正しい幅には独自の UL の幅が含まれます。

transform: translationX(-50%); この文の機能は、ul をその位置に対して幅の 50% だけ左に水平に移動することです。これだけで目的の効果が得られます。

実際のプロジェクトでは、ポップアップ効果をシミュレートするために p を使用して、モーダル ボックスもよく使用します。

上の画像は水平方向と垂直方向の中央に配置されています。

<p class="demo">　　 <img  src="/static/imghwm/default1.png"  data-src="img/pic3.jpg"  class="lazy"   / alt="可変の幅と高さで div の垂直方向と水平方向の中央揃えを実現する CSS3 のtransform属性の詳細な紹介" ></p>

.demo{
    position: fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

実際、上記の例は、ポップアップ ウィンドウを中央に配置するように作成した場合と同じです。これで、あまり多くの js を書いたり、助けを求めたりする必要がなくなります。

以上が可変の幅と高さで div の垂直方向と水平方向の中央揃えを実現する CSS3 のtransform属性の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。