如何在CSS中编写代码以使图片水平垂直居中显示？

在CSS中，实现图片居中显示可以通过多种方式完成。以下是一些常见场景及其相应的代码实现：

1. 文本水平居中

如果想要在一个块级元素内将图片水平居中，可以使用`text-align: center;`。

.center-div {
text-align: center;
}

2. 使用Flexbox

Flexbox 是现代布局中极为有用的工具，可以简单实现水平居中和垂直居中。

.flex-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center;     /* 垂直居中 */
height: 200px; /* 设置容器高度 */
}

3. 使用Grid

CSS Grid布局同样可以实现居中效果。

.grid-container {
display: grid;
place-items: center;
height: 200px;
}

4. 绝对定位和转换

如果想要使用绝对定位并利用CSS的`transform`属性进行居中，可以这样写：

.center-div {
position: relative;
height: 200px;
}

.centered-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

5. 使用表格布局和垂直对齐

虽然现在较少使用表格布局，但它仍然可以用于居中对齐图片：

.table-container {
display: table;
height: 200px;
}

.centered-image {
display: table-cell;
text-align: center;
vertical-align: middle;
}

6. 行内元素和文本对齐

对于行内元素或行内块元素，也可以实现垂直和水平居中：

.inline-container {
height: 200px;
line-height: 200px; /* 设置line-height等于容器高度实现垂直居中 */
text-align: center;
}

注意，上述代码块中的`line-height`方法仅适用于单行文本或行内元素。

根据具体的布局需求选择合适的居中方法，可以灵活运用这些技术实现图片的居中显示。