css整列方式

1、被設定要素がテキスト、ピクチャなどの行内要素である場合、水平中央は親要素にtext-align:center/left/rightを設定することによって実現される.垂直中央:1.1 display:table-cell;vertical-align: middle; 行の要素は幅の高さを設定することはできません.要素の内容だけで開くことができますが、親要素は幅の高さを設定します.1.2同時にheightを設定し、line-heightは同じ数値であり、文字の垂直中央を設定することができる.
注意:button、input、select、textarea、img、progressは、いずれもインライン要素です.2、ブロック要素として設定されている場合はtext-align:centerでは機能しません.定幅とブロックの2つの条件を満たす要素は、「左右margin」値を「auto」に設定することで中央に位置合わせでき、右揃えmargin-left:auto、左揃えmargin-right:autoです.3、自身の高いが確定していない場合、CSSで元素の垂直中央を実現する3つの方法(1)である.自分の高さと親コンテナの高さが分からない場合、絶対位置を利用するには、次の3行しか必要ありません.

parentElement{
        position:relative;
    }
 
 childElement{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
 }

(2).親コンテナの下に要素が1つしかなく、親要素が高さを設定している場合は、相対的な配置を使用するだけです.

parentElement{
    height:xxx;
}

.childElement {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

demo: Edit fiddle - JSFiddle
(3)Flexレイアウト:古いブラウザとの互換性を考慮しない場合は、Flexレイアウトの親要素でalign-items:centerを設定します.簡単で直感的な一労永逸:

parentElement{
    display:flex;/*Flex  */
    display: -webkit-flex; /* Safari */
    align-items:center;/*      */
}

4画像中央揃え

<div class="imgcar" :style="{backgroundImage:'url('+item.imgUrl+')'}"></div>

.imgcar{
  background-position: center center;
  background-repeat: no-repeat;
  width:100%;
  height:300px;
  background-size: cover;
}