本文目錄導(dǎo)讀：

1. 使用Flex布局

CSS技巧：圖片底部居中對(duì)齊的實(shí)現(xiàn)方法

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要將圖片在容器中底部居中對(duì)齊，這可以通過CSS樣式來實(shí)現(xiàn)，下面介紹幾種常見的方法。

使用Flex布局

Flex布局是一種強(qiáng)大的CSS布局方式，可以輕松實(shí)現(xiàn)元素的對(duì)齊，要使圖片底部居中對(duì)齊，可以將容器設(shè)置為Flex布局，并使用以下樣式：

1、將容器設(shè)置為Flex布局：display: flex;

2、設(shè)置圖片對(duì)齊方式為底部居中：align-self: center;

示例代碼：

.container {
  display: flex;
  justify-content: center; /* 水平和垂直方向居中對(duì)齊 */
}
img {
  align-self: center; /* 圖片底部居中對(duì)齊 */
}

二、使用定位（Position）和Transform屬性

另一種方法是使用CSS的定位屬性和Transform屬性來實(shí)現(xiàn)圖片底部居中對(duì)齊，具體步驟如下：

1、將容器設(shè)置為相對(duì)定位（position: relative;）

2、將圖片設(shè)置為***定位（position: absolute;）并置于容器底部：bottom: 0;

3、使用Transform屬性調(diào)整圖片水平方向的位置，使其居中：transform: translateX(-50%);

示例代碼：

.container {
  position: relative; /* 相對(duì)定位 */
}
img {
  position: absolute; /* ***定位 */
  bottom: 0; /* 置于容器底部 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 調(diào)整水平位置 */
}

這兩種方法都可以實(shí)現(xiàn)圖片底部居中對(duì)齊，可以根據(jù)具體需求和場(chǎng)景選擇合適的方法，在實(shí)際應(yīng)用中，可能還需要考慮其他因素，如容器的寬度、高度、圖片的尺寸等，以確保圖片在各種情況下都能正確對(duì)齊。