如何使用 CSS 在更大的 div 内使图像居中对齐（垂直和水平）？

在网页设计中，经常需要将图像居中对齐。这个问题可以通过使用 CSS 解决。下面介绍几种常用的方法。

方法1：使用 flexbox

Flexbox 是用来设计弹性布局的。使用 flexbox 可以轻松实现对齐效果，无需使用文本对齐器。

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

上面的代码使用了 display:flex 来创建一个 flex 容器。justify-content:center 和 align-items:center 分别用来设置水平和垂直对齐。

方法2：使用 position 和 transform

我们可以将图像定位为绝对位置，然后将它移动到屏幕的中心。这个方法需要使用 position 属性和 transform 属性。

.container {
    position: relative;
}
img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

上面的代码中，.container 的 position 属性被设置为 relative。由于 .container 的 position 属性是 relative，所以 img 的 position 属性可以被设置为 absolute。top:50%;left:50%; 使图像的中心点定位为容器的中心。transform:translate(-50%,-50%); 用来将图像在水平和垂直方向上移动到中心。

##方法3：使用 table 和 table-cell

我们可以使用 table 和 table-cell 来使图像居中。table-cell 是用来创建自适应表格的，可以轻松实现垂直和水平对齐。

.container {
    display: table;
}
img {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

上面的代码中，.container 的 display 属性被设置为 table。

img 的 display 属性被设置为 table-cell。vertical-align:middle; 用来垂直对齐图片，text-align:center; 用来水平对齐图片。

以上是几种实现图片居中对齐的主要方法，选择哪种方法主要取决于具体的需求。