CSS の垂直方向の中央揃えと水平方向の中央揃え_html/css_WEB-ITnose

前書き

水平方向のセンタリング設定:

1. インライン要素

   text-align:center; を設定します
   

2. Flexlayout

   set display:flex;justify-content:center;
   

垂直センタリング設定:

height = line-height; を設定する
1. 
   
複数行テキスト (インライン要素)親要素の高さを決定します
2. a: table を挿入 (挿入方法は水平方向の中央揃えと同じです) してから、vertical-align:middle を設定します

   b: 最初に display:table-cell を設定してから、vertical-align:middle を設定します;
   
   ブロックレベル要素のセンタリングソリューション

   水平方向のセンタリング設定:
   固定幅のブロック要素
左右のマージン値を自動に設定します
3. 
   
無限幅のブロック要素
4. a: 追加要素の外側の table タグ ( table、tbody、tr、td を含む完全な要素)、要素は td に書き込まれ、マージン値は auto に設定されます

   b: 要素の displa:inine メソッドを設定します。 : 親要素は、position:relative および left:50% を設定し、子要素は、position:relative および left:50% を設定します。 left、top、margin-left、margin-top のプロパティを設定するには
   

   .box{position:absolute;/*或fixed*/top:50%;left:50%;margin-top:-100px;margin-left:-200px;}

   ログイン後にコピー
   
   
   
   2 .position:fixed (absolute) 属性を使用します。margin:auto を忘れないでください。コンテンツを垂直方向に中央に配置するには、display:table-cell 属性を使用します。

.box{    position: absolute;或fixed    top:0;    right:0;    bottom:0;    left:0;    margin: auto;}

ログイン後にコピー

.box{display:table-cell;vertical-align:middle;text-align:center;width:120px;height:120px;background:purple;}

.box{    position: absolute;    transform: translate(50%,50%);    -webkit-transform:translate(50%,50%);    -moz-transform:translate(50%,50%);    -ms-transform:translate(50%,50%);}

.box{position:fixed;display:block;background:rgba(0,0,0,.5);}.box:before{content:'';display:inline-block;vertical-align:middle;height:100%;}.box.content{width:60px;height:60px;line-height:60px;color:red;