css怎麼讓照片垂直居中
- WBOY原創
- 2021-12-02 17:15:157887瀏覽
方法：1、為照片元素的父元素添加相對定位樣式，為照片元素添加絕對定位樣式；2、利用top屬性和「margin-top」屬性來設定照片垂直居中，只需要給照片元素加入「top:50%;margin-top:上外邊距值;」樣式即可。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css怎麼讓照片垂直居中
#用絕對定位實現垂直居中
1、給img的父元素添加相對定位屬性（position: relative），同時，要為子元素也就是圖片img元素加入絕對定位屬性（position: absolute）。
2、將圖片元素的top屬性設定為50%。
3、現在我們需要為img元素設定一個負的margin-top值，這個值為你想要實現垂直居中的元素高度的一半，*如果不確定元素的高度，可以不使用margin -top，而是使用transform:translateY(-50%);屬性。
記住：如果你想要同時實現水平居中，那麼你可以用實現垂直居中的一樣的技巧來實現。
範例如下：
<html>
<head>
<style type="text/css">
.posdiv{
width: 300px;
height: 250px;
position: relative;
border:1px solid red;
}
.posdiv img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="posdiv">
<img src="1118.02.png" alt="">
</div>
</body>
</html>輸出結果：
#（學習影片分享：css影片教學）
以上是css怎麼讓照片垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css怎麼禁止頁面的左右捲軸下一篇：css怎麼禁止頁面的左右捲軸