ホームページ  >  記事  >  ウェブフロントエンド  >  幅、高さ、垂直方向のセンタリングを固定しないCSSの実装コード

幅、高さ、垂直方向のセンタリングを固定しないCSSの実装コード

小云云
小云云オリジナル
2018-02-28 10:49:531498ブラウズ


本文主要和大家分享css不固定宽高垂直居中的实现代码,希望能帮助到大家。
一、

父元素:
display: flex;
justify-content: center;
align-items: center;


二、

父元素:
position: relative;

元素:
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;


三、   		
display: table;需要有一个中间层,垂直居中元素为第三层

(1)
父元素的父元素:
display: table;

父元素:
display: table-cell;
text-align: center;
vertical-align: middle;

元素:
display: inline-block;


(2)

父元素的父元素:
display: table;

父元素:
display: table-cell;
vertical-align: middle;

元素:
margin: auto;

関連する推奨事項:

CSS 垂直方向中央揃えの実装コード

4 つの CSS 垂直方向中央揃え方法

CSS 垂直方向中央揃えの解決策

以上が幅、高さ、垂直方向のセンタリングを固定しないCSSの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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