在本综合指南中，了解如何使用香草CSS垂直和水平地将图像集中。您可以根据项目的需求和您自己的个人喜好从几种方法中挑选。作为初级开发人员，可能很难理解每种方法的工作原理以及选择哪种方法 - 我们将使用下面的示例介绍几种方法来帮助您进行指导。
如何水平居中图像
使用CSS将图像水平居中表示您以X轴为中心。
方法1：保证金自动
使用左右的自动边距，只要它的宽度小于100％。
html
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
CSS
img {
display: block;
width: 250px;
margin-left: auto;
margin-right: auto;
}
- 显示：块| 将我们的图像元素从其内联级默认值更改为块级元素
- 宽度：250px | 使图像的设定宽度低于100％（您可以在此处使用％而不是PX值来帮助响应能力）
- 边距左：自动和边缘权利：自动| 这两个属性水平居中我们的图像属性
注意：而不是使用保证金 - 左：自动和边缘权利：自动您可以使用保证金：自动速记：但是，它设置了所有保证金方向（Margin-Top，Margin-Top-对，边距底，边距左）到自动。如果您使用图像顶部和底部的特定保证金值，这可能会破坏您的布局。
替代CSS
/* Alternative: Using margin auto shorthand */
img {
display: block;
width: 250px;
margin: auto;
}
方法2：显示Flex
如果您在整个项目中都使用Flexbox，这是一种水平居中图像的好方法。对于此方法，您需要具有包裹图像元素的容器Div。
html
<div>
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>
- div | 一个容器（又称包装器）Div，其中包含我们需要中心的图像
CSS
div {
display: flex;
justify-content: center;
}
img {
width: 250px;
}
- 显示：flex | 将Flexbox应用于我们的包装器Div
- Jusify-content：中心| 中心水平屈曲儿童（假设flex方向属性是默认的）
- 宽度：250px | 使图像的设定宽度低于100％（您可以在此处使用％而不是PX值来帮助响应能力）
方法3：文字对齐
图像默认情况下是内联级别的元素，当由块级元素包含时，您可以使用容器上的文本对齐属性水平中心。
html
<div>
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>
- div | 一个容器（又称包装器）Div，其中包含我们需要中心的图像
CSS
div {
display: block;
text-align: center;
}
img {
width: 250px;
}
- 显示：块| 确保我们的包装器div是一个块级元素，因此文本align works（默认情况下，div是块级别，因此在此上下文中，它是冗余的，但是您使用的元素因为包装器可能默认情况下可能不是块级，并且需要使用此功能）
- text-align：中心| 应用于块级包装元素，它将中心包含的图像元素
- 宽度：250px | 使图像的设定宽度低于100％（您可以在此处使用％而不是PX值来帮助响应能力）
方法4：位置绝对，CSS计算和CSS变换
这种方法是一种水平居中的手动方法，它比本指南中涵盖的其他方法更重要，但是它仍然反应灵敏。
html
<div>
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>
- div | 一个容器（又称包装器）Div，其中包含我们需要中心的图像
CSS-计算
div {
position: relative;
}
img {
position: absolute;
left: calc(50% - 125px);
width: 250px;
}
- 位置：相对| 使图像相对于容器Div 对齐
- 位置：绝对| 让您设置图像的位置
-
左：计算（50％-125px）| 水平居中我们的图像
- 左：仅50％将移动图像的左侧以水平为中心
- 我们知道图像的宽度（250px），要水平居中，我们需要将其移至该宽度的一半（125px）
- calc（50％-125px）将我们的图像移至图像宽度的一半（125px）的一半，以水平为中心
替代CSS-转换和翻译
此替代方法在我们的左属性中交换了CACT函数，并将其替换为变换属性 +转换函数。由于您不需要知道我们的图像的宽度是什么 - 因此，此方法可以说是更好的响应性 - 允许我们的图像根据需要动态大小，而无需在我们的CSS中进行其他媒体查询以补偿。
div {
position: relative;
height: 500px;
background-color: red;
}
img {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 25%;
}
以前的CSS示例和此替代版本之间的差异位于顶部，变换和宽度属性（我们删除了高度属性）。
- 左：50％| 将图像的左侧移至水平对齐位置
- 变换：translatex（-50％）| 这将左图的图像移至其高度的50％，以使图像的中心与水平中心位置对齐
- 宽度：25％| 我们将宽度设置为25％，以表明我们尚未明确设置高度 +宽度，这意味着它可以根据需要进行响应性更改，并且此方法将继续以水平居中我们的图像
如何垂直将图像集中
使用CSS将图像水平居中表示您将其居中在Y轴上。在垂直方面居中的图像的方法比水平水平少，但是幸运的是，弹性箱和网格等更现代的方法使任务变得容易。
方法1：显示flex
您需要一个包裹在要居中的图像周围的容器Div，还需要给容器一个大于图像高度的高度，以便我们可以将其垂直居中。
html
<div>
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>
- div | 一个容器（又称包装器）Div，其中包含我们需要中心的图像
CSS
div {
display: flex;
align-items: center;
height: 500px;
}
img {
width: 250px;
}
- 显示：Flex | 将包装器Div设置为Flexbox
- 对信号项目：中心| 中心要垂直居中，我们的图像是本示例中唯一的flex-item（假设flex方向属性是默认的）
- 高度：500px | 容器需要比我们要居中的图像高，以便图像可以垂直居中
方法2：绝对位置，CSS CALC＆CSS变换
此方法是一种手动旋转图像的手动方法，它比本指南中涵盖的其他方法更重要，但它仍然响应。
html
<div>
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>
- div | 一个容器（又称包装器）Div，其中包含我们需要中心的图像
CSS-计算
div {
position: relative;
height: 500px;
}
img {
position: absolute;
top: calc(50% - 37.5px);
height: 75px;
}
- 位置：相对| 使图像相对于容器Div 对齐
- 高度：500px | 为容器div设置高度高于图像高度 的高度
- 位置：绝对| 让您设置图像的位置
-
top：calc（50％-37.5px）| 将图像的位置设置为垂直中心
- 顶部：仅50％将移动图像的顶部以垂直居中
- 我们需要稍微向上移动图像，以使图像的中心对齐以垂直为中心
- calc（50％-37.5px）将图像向下移动50％，然后我们减去图像高度的一半（图像高度：75px，其中一半是：37.5px）从该图中移动图像以垂直为中心
替代CSS-转换和翻译
此替代方法在我们的顶级属性中交换了CACT函数，并用Transform + Translate函数代替它。由于您不需要知道我们的图像的高度，因此这种方法可以说是更好的响应性 - 允许我们的图像根据需要动态尺寸，而无需在我们的CSS中进行其他媒体查询以补偿。
div {
position: relative;
height: 500px;
background-color: red;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25%;
}
以前的CSS示例和此替代版本之间的差异位于顶部，变换和宽度属性（我们删除了高度属性）。
- 顶部：50％| 将图像的顶部移至垂直排列的位置
- 变换：翻译（-50％）| 这将图像提高了其高度的50％，因此图像的中心与垂直中心的位置对齐
- 宽度：25％| 我们将宽度设置为25％，以表明我们尚未明确设置高度 +宽度，这意味着它可以根据需要进行响应性更改，并且此方法将继续垂直居中我们的图像< /li>
如何同时水平和垂直居中图像
以垂直和水平为中心的图像表示您将其集中在X和Y轴上。您可以想到将图像直接放在页面中心（包装师）。
方法1：如何用CSS网格集中图像
使用此中心方法与CSS网格一起将我们的图像在同一时间水平和垂直居中。可以说，这是垂直和水平居中图像的最简单方法。
html
<div>
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>
- div | 一个容器（又称包装器）Div，其中包含我们需要中心的图像
CSS
div {
display: grid;
place-items: center;
height: 500px;
}
img {
width: 250px;
}
- 显示：网格| 将网格布局应用于我们的包装器div
- 地点项目：中心| 垂直和水平居中我们的图像
- 高度：500px | 为容器div设置高度高于图像高度 的高度
- 宽度：250px | 使图像的设定宽度低于100％（您可以在此处使用％而不是PX值来帮助响应能力）
方法2：显示Flex（水平和垂直）
使用Flexbox将图像水平和垂直居中只是将水平和垂直方法既相结合的问题。
html
<div>
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>
- div | 一个容器（又称包装器）Div，其中包含我们需要中心的图像
CSS
div {
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 250px;
}
- 高度：500px | 为容器div设置高度高于图像高度 的高度
- 显示：Flex | 将包装器Div设置为Flexbox
- Jusify-content：中心| 中心flex-Items水平的项目，我们的图像是本示例中唯一的flex-item（假设flex方向属性是默认的）
- 对信号项目：中心| 中心要垂直居中，我们的图像是本示例中唯一的flex-item（假设flex方向属性是默认的）
- 宽度：250px | 使图像的设定宽度低于100％（您可以在此处使用％而不是PX值来帮助响应能力）
方法3：位置绝对，CSS变换＆CSS转换（水平和垂直）
这种方法是一种手动依赖图像的手动方式，它比本指南中涵盖的其他方法更具参与度，但它仍然响应。
html
<div>
<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>
- div | 一个容器（又称包装器）Div，其中包含我们需要中心的图像
CSS
div {
position: relative;
height: 500px;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 25%;
}
- 位置：相对| 使图像相对于容器Div 对齐
- 高度：500px | 为容器div设置高度高于图像高度 的高度
- 位置：绝对| 让您设置图像的位置
- 左：50％| 设置图像的左侧以水平为中心
- 顶部：50％| 设置图像的顶部要垂直居中
-
转换：转换（-50％，-50％）| 调整图像位置以提高其高度的50％，并将其宽度的50％剩下，以使图像中心的中心为中心水平和垂直
- 翻译CSS函数是Translatex和Translatey函数的速记
- 可以将其分解为翻译（x，y）
- 宽度：25％| 我们将宽度设置为25％，以表明我们尚未明确设置高度 +宽度，这意味着它可以根据需要进行响应性更改，并且此方法将继续垂直居中我们的图像
了解更多CSS
如果您正在寻找更多的CSS内容，我们有几个播客，您可能会感兴趣：
CSS属性选择器和自定义属性
在这里听：Episode Link
- 学习如何根据属性的存在选择元素，或具有特定值的属性的存在
- 用香草CSS特征通过属性值过滤
- 创建并使用自定义属性
CSS选择器速效课程
在这里听：Episode Link
- 学习如何根据其类，ID或HTML元素类型选择元素
- CSS选择器结构
- 简单选择器
- 复合选择器
- 相对选择器
- 选择器列表
- 分组选择器
Scrimba折扣！
- 学习使用scrimba及其交互式跟随代码编辑 学习代码
- 加入他们的独家不和谐社区和网络以找到您的第一份工作！
- 使用此URL可在所有付费计划中获得10％的折扣：https://tinyurl.com/ScrimbaHATT
来源
- 如何在html＆css（Hubspot）中垂直和水平居中图像
- html中心图像 - css align img中心示例（Free Code Camp）
- 如何用CSS（Free Code Camp）垂直和水平地将图像集中