本文主要是介绍将<img>图片水平、垂直居中的几种方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

假设有一个盒子，我们要在其中放置图片，使其居中，有哪些办法呢？（想到了茴香的“茴”字几种写法……）

1、首先是传统的，text-align水平居中，line-height垂直居中。

<div style="width: 1000px; height: 400px; background-color: darkslategrey; overflow: hidden;">
    <div style="width: 300px; height: 200px; margin: 50px auto;
background-color: lightskyblue; text-align: center; line-height: 200px; font-size: 24px;">
        你好！！！Any<img src="image/test.jpg" alt="test" style=" vertical-align: baseline;">
    </div>
</div>

当设置 line-height=height 时，单行元素会自动垂直居中——实际上不算很垂直……不信你可以用标尺自己量一下。

而<img>也是属于行内元素。不顾哦他的对其方式受到 “vertical-align” 的影响，默认值为 baseline，也就是图片底端对齐的是文本的【基线上】。而这个基线受到文本字号大小的影响，当字号为0时，图片底端对齐父元素垂直中轴。

需要对【图片本身】设置 vertical-align = middle，让他对齐中轴。

不过可以看到，并没有完整对齐……

所以请将父盒子的字体大小调整为0！！！即使父盒子里没有文本

 总结：给父盒子设置如下属性，就能使img保持居中。

1 .box {
2         width: 100%; /*宽度是要的，否则怎么水平居中呢？高度同理*/
3         height: 200px; /*保险起见，还可以给子元素img设置最大宽高*/
4         text-align: center;
5         line-height: 200px;
6         vertical-align: middle;
7         font-size: 0
8     }

2、父元素设置为弹性盒子

<div style="position: relative; width: 500px; height: 200px; margin: 50px auto; background-color: lightskyblue;
    display: flex; align-items: center; justify-content: center">
        <img src="image/test.jpg" alt="test">

<!--请无视以下两条辅助线，是我用来演示交叉中心的-->

        <div
                style="position: absolute; top: 50%; width: 100%; height: 2px; background-color: rgba(255,0,0,.5);
                margin-top: -1px">
        </div>
        <div
                style="position: absolute; left: 50%; top: 0; width: 2px; height: 200px; background-color:
                rgba(255,0,0,.5);
                margin-left: -1px">
        </div>
    </div>

 弹性盒子目前鄙人尚未使用到，不过就是有点单纯了解。

重点就是给<img>父盒子添加如下设置即可。

display: flex; 
align-items: center; 
justify-content: center

注意，align-items 默认值为 strech 会将图片本身作拉伸！所以需要手动设置为 center（即使你不想居中）像这样

优点是不需要知道父盒子的大小以及图片本身大小。

3、万能的margin || padding

<img src="image/test.jpg" alt="test" style="display:inline-block; /*padding: 68px 206px*/ margin: 68px 206px">

 这个方法没啥好说的，就是添加 内\外边距 ，通过距离把控，人工使其居中。复用性极差，而且需要提前知道 父盒子尺寸 与 图片尺寸，不建议使用。

4、超级好用的定位！

<img src="image/test.jpg" alt="test" style="position: relative; top: 50%; left: 50%">

可以看出，此时并没有位于正中心，因为定位和margin、padding一样，都是以盒子边缘来判断距离（这不废话么……这里我还手打了样式，结果抬头发现有设置删除线的，好蠢啊……）

所以需要适当得修改位置使其居中。以下在 <img> 标签里增添

img {
transform: translate(-50%,-50%);/*坐标轴为第四象限那样，右下为正向，反之负向。这里根据你之前定位来决定相反的偏移量使其居中。复合写法为 translate(x,y)*/
}

因为 translate 的位移是根据元素本身大小来的。所以我们不需要像margin那样丈量 元素本身 以及 父盒子的宽高！十分方便。

注意，这样存在一个问题。那就是如果你要设置 :hover 样式的话——譬如图片垂直移动，那么可能会有所冲突……

.test1:hover img {
        transform: translateY(-10px);
    }

    .test1 img {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 1.5s;
    }

因为呢，这里的 .test1:hover 的样式层叠性挺高的。给test1前面再加上一个类名声明的话就能保证图片使用静态下的样式了！

不过这样又会导致本身 hover 的动画效果失效……所以要不给父盒子添加动画效果而非单纯<img>标签，要不负偏移修正效果使用 margin 来达成——这样又需要知道图片大小了，有点画蛇添足了……

把父盒子的层级设置低一些，并且不要设置背景颜色，这样就和图片本身移动没什么区别了。

.test1:hover{
        transform: translateY(-20px);
    }

    .test1 {
        transition: all 1.5s;
    }

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

题外话，如果对文字居中的话，最好使用第一种方法。定位不太靠谱，因为行内元素先是 left 碰到了边界，他就会自动换行，之后即使通过 translate 偏移回去，换行也不会停下

<span style="position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); ">你好我的朋友，天气真好啊</span>

需要强制该行内元素禁止换行 white-space: nowrap ，这样他就会正常以一行展示了。

<span style="position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); white-space: nowrap">你好我的朋友，天气真好啊</span>

与君共勉。

这篇关于将<img>图片水平、垂直居中的几种方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！