CSS で垂直方向と水平方向の中央揃えを行う 6 つの方法を共有します

CSS のセンタリングを実装するいくつかの方法をまとめました。 注: * は一般的な方法、「wrap」はコンテナ、「div」はセンタリングする要素です。

*1.絶対位置、幅と高さがわかっている場合は、次のコードを実装できます。または、負のマージンを使用できます。

.div { 
    width: 200px;
    height: 200px;
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

2。この要素は、特定の div を実装するだけです。親要素の 1/2 で、水平方向と垂直方向の中央に配置され、親要素のサイズに比例して拡大または縮小されます。

.div{
    position: absolute;
    left: 30%;
    right:30%;
    top: 25%;
    bottom:25%;
}

*3.translate、幅がわかっていて高さが不明な場合

.wrap{
    width:200px;//也可以不写，默认占总宽度的50%
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

4.table-cell、div自体の高さは不明で、垂直方向のセンタリングのみが達成されます、ps、この場合はdiv widthは100%

.wrap{//外层容器
    display: table;
}
.div{//内层容器
    display: table-cell; 
    vertical-align: middle; 
}

*5.flexレイアウト、幅が固定されていない場合は、親コンテナでdisplay:flexを設定するだけです。

.wrap{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;   
}

6. :afterの使い方が得意なハック方法。

りー

以上がCSS で垂直方向と水平方向の中央揃えを行う 6 つの方法を共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。