这次给大家带来html中文字和图片垂直居中的方法，以及html中文字和图片垂直居中的注意事项有哪些。 下面是一个实际案例，我们一起来看看。
方法一：将bag的高度设置为与line-height相同。 此方法适用于一行文本。
图片的垂直居中和一行文字的对齐方式使用属性vertical-align
小图标和文字垂直对齐，插入小图标作为背景
// attr：设置自己生成的属性css3 图片上显示文字居中，比如选中checked，即使用鼠标点击其值也是未定义的，所以自己的属性建议使用prop
包含块
元素的大小和位置的估计通常由该元素所在的包含块决定。 包含块并不是特指某个元素区域，而是视觉上想象的一个区域。 了解了之后就可以方便的对Elements进行定位了。
那么如何知道元素的包含块在哪里呢？
初始包含块
用户代理（例如浏览器）选择根元素作为包含块（称为初始包含块）。 当html的子元素没有其他封闭包含块时，将使用初始包含块进行定位，
初始包含块的大小？ 也就是说，图层大小和高度不会随着html的减小而减小。
一种非绝对定位元素，其包含块由最近的块级祖先元素的包的内容边界组成。
对于浮动元素也是如此，从内容边框开始。
绝对元素的包含块是从最近位置不是静态的祖先构造的
事实上，这更复杂。 您需要考虑绝对元素的包含块是内联创建的还是块级元素。 内联的兼容性比较差css3 图片上显示文字居中，因此通常避免在内联元素上包含块级元素，因此大多数仍然从块级元素创建包含块。
它的包含块是从祖先边框的内边框生成的。
如果元素具有属性“position:fixed”，则包含块由层构造
短毛css图片中css图片水平居中和垂直居中有两种情况。 有时图像需要同时水平和垂直居中。
以下是几种中间情况：
css图像水平居中
1、使用margin:0 auto实现图像水平居中
使用margin:0 auto实现图片居中就是给图片添加css样式margin:0 auto，如下：
登录复制
2、利用文本的水平居中属性text-align: center
代码如下所示：
登录复制
css图像垂直居中
1、利用height==行高实现图片垂直居中
该方法只有在标注了高度的情况下才可以使用，代码如下：
登录复制
2.使用table实现图片垂直居中
表格的使用方式是利用表格的垂直居中属性，代码如下：
这里显示：表格； 并显示：表格单元格； 用于模拟表。 此方法不兼容IE6/IE7。 IE67不支持display:table。 如果不需要支持IE67，可以使用
缺点：当设置display:table时； 它可能会改变你原来的布局
登录复制
3.使用绝对定位实现图像垂直居中
如果已知图片的长和高，代码如下：
登录复制
4、移动端可以使用flex布局实现css图片垂直居中
移动端的浏览器版本通常比较高，所以可以大胆使用flex布局，（flex布局是指css3的flex布局用法）demo代码如下：
CSS代码：
.ui-flex {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
box-sizing: border-box
}
.ui-flex.justify-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.ui-flex.center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
登录复制
登录复制
相信看完这些案例，你已经掌握了方法。 更多精彩，请关注php中文网其他相关文章！
