在網頁設計中，圖片是經常被用到的元素。在使用圖片時，我們可能會遇到圖片大小不同導致布局混亂的情況，這時候我們可以使用CSS圖片按比例居中來解決。 首先，在HTML中添加需要居中的圖片，如下所示：

<p>
<img src="example.png" alt="example">
</p>

接著，在CSS中使用以下代碼來實現圖片按比例居中：

p{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img{
max-height: 100%;
max-width: 100%;
}

代碼解析： 1. 設置p元素為flex布局，使子元素可以水平垂直居中。 2. 設置p元素高度為100vh，以占據整個瀏覽器窗口大小。 3. 設置img元素的最大寬度和最大高度為100%，以保持圖片的比例。 這樣就完成了圖片按比例居中的效果，讓我們的網頁布局更加清晰美觀。