Home >Web Front-end >CSS Tutorial >How to center an image vertically

How to center an image vertically

迷茫
迷茫Original
2017-03-25 14:16:361755browse

Type 1, centering effect

24d1e2eac3566597a260e618e7c94f54
00bac79f08837af9828fe881b8052e60Centering effect94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

/*第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;
    }

The second type of picture is centered

41c69c9e89bd3fbfbb1ab2a34387bbfe
6d9cd116d059fc2b06596729840d8af6
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;}/*跟父级一样高*/

The third type, centered effect parent element Use display: table; child element display: table-cell;
7c2850d2697cabe39bc6140f38ba3788
c0e3bb2143b38eaab9666f872a0a4b54fb0edc39ba8245afe488329968486a2654bdf357c58b8a65c66d7c19c8e4d114
94b3e26ee717c64999d7867364b1b4a3

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

Type 4, centering effect
161ca4ab4bc2fe77e29b9529a004e649
e0231ecf57b80cc0c42921f0a9dd46aa
94b3e26ee717c64999d7867364b1b4a3

/*第4种,居中效果  根据父元素来计算*/
.box4{
    width:300px;height: 300px;border: 1px solid #F22727;
}
.center4{
    width: 200px;height: 200px;position: relative;left: 16%;top: 19%;
}

The above is the detailed content of How to center an image vertically. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn