So zentrieren Sie ein Bild vertikal

Typ 1, Zentriereffekt

24d1e2eac3566597a260e618e7c94f54
00bac79f08837af9828fe881b8052e60Zentriereffekt94b3e26ee717c64999d7867364b1b4a3
< ;/p>

/*第1种，垂直居中效果*/
.box{
       width: 200px;height: 200px;border: 1px solid #ccc;
       position: relative;
  }
.center{
      width: 100px;height: 100px;background: gray;
      margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;
    }

Der zweite Bildtyp ist zentriert

41c69c9e89bd3fbfbb1ab2a34387bbfe
042d00287983ab9bebb8141a0863aaf5
aeac9416d0a595ba39a45313a118d92554bdf357c58b8a65c66d7c19c8e4d114
94b3e26ee717c64999d7867364b1b4a3

/*第2种 图片垂直居中*/
/* span是辅助元素 vertical-align这个属性的特点,它是相对兄弟级行高（line-height）来定位*/

.box2{
    width: 350px;height: 350px;border: 1px solid #F22727;
    text-align: center;
}
.center2{ vertical-align: middle;}
.block{ line-height: 350px;}/*跟父级一样高*/

Typ 3, Für Für den Zentrierungseffekt verwendet das übergeordnete Element display: table; untergeordnetes Element display: table-cell>
c0e3bb2143b38eaab9666f872a0a4b5413ceb6e55a8fbbd1bde9247bd86930c654bdf357c58b8a65c66d7c19c8e4d114
94b3e26ee717c64999d7867364b1b4a3

/*第3种，居中效果*/
.box3{
    width: 350px;height: 350px;border: 1px solid #F22727;display: table;text-align: center;
}
.center3{
    display: table-cell;vertical-align: middle;
}

Typ 4, Zentriereffekt

4c1c45b8c2096f495ca61e8184d3c104
94b3e26ee717c64999d7867364b1b4a3

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Bild vertikal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!