水平居中：text-align:center
垂直居中：line-height的值同height或vertical-align:middle

讓圖片在屏幕正中顯示的幾種方法：
一、用margin負值，需要寬高固定。

position:absolute; left:50%; top:50%; margin-left:-寬度的一半; margin-top:-高度的一半；

二、使用css3中的新屬性translate，不需要寬高固定。

position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);

三、使用flex布局，不需要寬高固定。需要在父容器中設置：

display:flex; justify-content:center; align-items:center; //內容物必須有多行，此屬性才有效。

四：將上下左右全設為0，不需要寬高固定。

position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;

上下左右全為0會拉伸圖片充滿父容器，margin為auto會自動填充外邊距，從而實現圖片居中。

總結

以上是生活随笔為你收集整理的图片实现水平垂直居中的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。