CSS之未知高度img垂直居中

深藏阁楼爱情的钟 2022-06-07 01:44 230阅读 0赞

**效果如下：**

**![Center][]**

**测试代码如下：（能够水平居中，通过text-align:center实现）**

<style>
    .box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
    </style>
    </head>
    <body>
    <div class="box">
        <img src="bigptr.jpg" />
    </div>

**方案一：**

**在img标签后边添加一个span标签，设置其显示方式为inline-block，高度为100%，vertical-align属性为middle；然后再给img标签页加上该vertical-align属性即可。**

<style>
    .box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
    span{ display:inline-block; height:100%; vertical-align:middle;}
    img{ vertical-align:middle;}
    </style>
    </head>
    <body>
    <div class="box">
        <img src="bigptr.jpg" /><span></span>
    </div>

**原理：**

![SouthEast][] ![Image 1][]

**方案二：**

**通过display:table方式实现，在img外层添加一个span标签，设置其display属性为table-cell，同时vertical-align属性为middle。但IE6，7不支持display:table属性。**

<style>
    .box{ width:800px;height:600px;border:2px solid #000; text-align:center;display: table;}
    span{ display:table-cell; vertical-align:middle;}
    </style>
    </head>
    <body>
    <div class="box">
        <span><img src="bigptr.jpg" /></span>
    </div>

**在IE6，7下使用绝对定位（vertical-align:top是为了解决img标签与span标签的间距）**

<style>
    .box{ width:800px;height:600px;border:2px solid #000; text-align:center; display:table;position:relative; overflow:hidden;}
    span{ display:table-cell; vertical-align:middle;*position:absolute;left:50%;top:50%;}
    img{ *position:relative; vertical-align:top;left:-50%;top:-50%;}
    </style>
    </head>
    <body>
    <div class="box">
        <span><img src="bigptr.jpg" /></span>
    </div>

**原理：**

![SouthEast 1][]

![Image 1][]

[Center]: /images/20220607/ece147c359224e71b95a593d9e938e19.png
[SouthEast]: https://img-blog.csdn.net/20170405112832951?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvU2t1bGxTa3k=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[Image 1]: 
[SouthEast 1]: /images/20220607/e2b1ea5e3361452791b985429f8c8981.png

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 img水平垂直居中

div{ position: relative; width: 400px; ...

阳光穿透心脏的1/2处/ 2024年04月17日 18:49/ 0 赞/ 88 阅读

相关 css 让img图片在div标签垂直居中

使用 flex 布局 <div class="login"> <img class="login-img" src="images/logo.png"/>

朱雀/ 2023年01月19日 11:58/ 0 赞/ 13 阅读

相关 css元素动态高度水平垂直居中

在明确宽高尺寸情况下，实现水平垂直居中方法： 1、使用固定定位 .div{ width: 300px; height: 100px;

约定不等于承诺〃/ 2022年12月07日 12:07/ 0 赞/ 231 阅读

相关 css 垂直居中

垂直居中 1. 行内元素，可以设置line-height 与父级 height 相等 2. 设置 margin/padding 居中 3. flex 居中设置 a

╰半橙微兮°/ 2022年11月27日 10:13/ 0 赞/ 234 阅读

相关 css垂直居中--img p

因为p标签和img居中的方法我知道的不多就放到一起了！ 1.单行文字的居中很简单一个text-align:center; line-hegight: 父级div的高度。

水深无声/ 2022年07月16日 00:13/ 0 赞/ 228 阅读

相关 CSS之未知高度img垂直居中

效果如下： ![Center][] 测试代码如下：（能够水平居中，通过text-align:center实现） <style> .box{ widt

深藏阁楼爱情的钟/ 2022年06月07日 01:44/ 0 赞/ 231 阅读

相关 CSS未知宽高的元素，水平垂直居中

方法一：使用定位思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%) 优点：高大上,

男娘i/ 2022年04月13日 09:44/ 0 赞/ 260 阅读

相关 css 垂直居中

1、利用display：table和display：table-cell；vertical-align: middle; <div style="width: 36p

素颜马尾好姑娘i/ 2022年03月16日 09:05/ 0 赞/ 382 阅读

相关 css 垂直居中

css 垂直居中只需要一行代码。 line-height: 50px; 其中的50根据父div的height 决定，例如父div高度为50px；则line-he

浅浅的花香味﹌/ 2021年09月27日 09:40/ 0 赞/ 460 阅读

相关 CSS垂直居中

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加

心已赠人/ 2021年09月10日 16:26/ 0 赞/ 512 阅读