将图片水平、垂直居中的几种方法

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

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

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

而也是属于行内元素。不顾哦他的对其方式受到 “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、父元素设置为弹性盒子

style="position: absolute; left: 50%; top: 0; width: 2px; height: 200px; background-color:

rgba(255,0,0,.5);

margin-left: -1px">