1. **水平居中**
- **使用`margin`屬性（適用于已知圖片寬度的情況）**
- 假設你有一個`div`元素，它包含一張圖片，并且你知道圖片的寬度。你可以將`div`的`width`設置為大于或等于圖片寬度的值，然后使用`margin: 0 auto;`來使圖片在`div`中水平居中。
- 示例代碼如下：
```html
<style>
.image - container {
width: 300px;/* 這里設置的寬度要大于或等于圖片寬度 */
border: 1px solid black;
}
.image - container img {
width: 200px;
margin: 0 auto;
}
</style>
<div class="image - container">
<img src="your - image - url.jpg" alt="Your Image">
</div>
```
- 在這個例子中，`.image - container`是包含圖片的`div`類名，通過設置`width`屬性來確定容器寬度，然后在`img`元素上使用`margin: 0 auto;`使圖片在水平方向上自動居中。`auto`值會將左右外邊距設置為相等的值，從而實現水平居中。
- **使用`text - align: center`屬性（適用于內聯元素或內聯 - 塊元素）**
- 對于`div`中的圖片，你可以將`div`的`text - align`屬性設置為`center`，這樣其中的內聯元素（如`img`元素）就會在水平方向上居中。
- 示例代碼如下：
```html
<style>
.image - container {
border: 1px solid black;
text - align: center;
}
</style>
<div class="image - container">
<img src="your - image - url.jpg" alt="Your Image">
</div>
```
- 在這里，將`.image - container`的`text - align`屬性設置為`center`，因為`img`元素是內聯元素（默認情況下），所以它會在`div`的水平方向上居中。不過這種方法可能會影響`div`中其他文本內容的對齊方式。
2. **垂直居中**
- **使用`display: flex`和`align - items: center`（適用于現代瀏覽器）**
- `flex`布局提供了強大的對齊功能。你可以將包含圖片的`div`設置為`display: flex`，并使用`align - items: center`來使圖片在垂直方向上居中。
- 示例代碼如下：
```html
<style>
.image - container {
border: 1px solid black;
display: flex;
align - items: center;
}
</style>
<div class="image - container">
<img src="your - image - url.jpg" alt="Your Image">
</div>
```
- 在這個例子中，`.image - container`被設置為`flex`容器，`align - items: center`屬性使容器中的所有子元素（這里是圖片）在交叉軸（垂直方向）上居中。
- **使用`display: table - cell`和`vertical - align: middle`（兼容性較好）**
- 這種方法利用了表格單元格的垂直對齊特性。將`div`設置為`display: table - cell`，并將`vertical - align`屬性設置為`middle`來實現圖片的垂直居中。
- 示例代碼如下：
```html
<style>
.image - container {
border: 1px solid black;
display: table - cell;
vertical - align: middle;
}
</style>
<div class="image - container">
<img src="your - image - url.jpg" alt="Your Image">
</div>
```
- 在這里，`.image - container`被模擬為一個表格單元格，`vertical - align: middle`屬性使圖片在垂直方向上相對于`div`居中。不過這種方法可能會對布局的其他部分產生一些影響，比如如果`div`中有其他元素，它們也會受到表格布局規則的影響。
3. **水平和垂直同時居中**
- **使用`display: flex`和`justify - content: center`與`align - items: center`組合（現代瀏覽器推薦）**
- 同時使用`justify - content: center`（用于水平居中）和`align - items: center`（用于垂直居中）來實現圖片在`div`中的水平和垂直同時居中。
- 示例代碼如下：
```html
<style>
.image - container {
border: 1px solid black;
display: flex;
justify - content: center;
align - items: center;
}
</style>
<div class="image - container">
<img src="your - image - url.jpg" alt="Your Image">
</div>
```
- 在這個例子中，`justify - content: center`使圖片在`div`的主軸（水平方向）上居中，`align - items: center`使圖片在交叉軸（垂直方向）上居中，從而實現了圖片在`div`中的水平和垂直同時居中。
- **使用`position: absolute`和`transform`（相對復雜但兼容性較好）**
- 首先將`div`設置為相對定位（`position: relative`），然后將圖片設置為絕對定位（`position: absolute`），通過設置`top`、`left`、`right`、`bottom`屬性和`transform: translate(-50%, -50%);`來實現圖片在`div`中的中心定位。
- 示例代碼如下：
```html
<style>
.image - container {
border: 1px solid black;
position: relative;
height: 300px;
width: 300px;
}
.image - container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="image - container">
<img src="your - image - url.jpg" alt="Your Image">
</div>
```
- 在這個例子中，`image - container`是相對定位的`div`，圖片是絕對定位的。`top: 50%`和`left: 50%`將圖片的左上角定位到`div`的中心位置，然后`transform: translate(-50%, -50%);`將圖片向上和向左移動自身寬度和高度的一半，從而使圖片在`div`中實現水平和垂直同時居中。不過這種方法可能會因為`transform`屬性而導致一些性能問題，并且在一些舊瀏覽器中的兼容性可能不太好。