CSS实现文字和图片的水平垂直居中

关于文字和图片的水平垂直居中，在前端界绝对算是一个老生常谈的问题了，尤其是垂直居中，什么千奇百怪的解法都能想的出来。下面我就总结一些比较常用的方法：

 

一、文本的水平垂直居中：

 1、水平居中：

是不是很开心？超级简单的问题，一个text-align：center 就搞定了。过过过...

 

-------------------------------------下面看单行、多行文本的垂直居中-------------------------------------

 

2、垂直居中：

　　1）、单行文本

<!--只要height值等于line-height值就ok -- >
<div style="height:100px;line-height:100px;">
    有且仅占有一行的情况下垂直居中
</div>

 ps：height === line-height 无法使替换元素，如<img>、<input>、<areatext>、<select>...垂直居中，必须有<a>、<span>...类似行内标签配合才能使垂直居中生效！ （下面的图片垂直居中解法5 会用到这个特性）

 

　　2）、多行文本

情况1：高度固定

关键属性：display:tabel-cell; vertical-align:middle;

</style>

 

情况2：父级高度固定，嵌套行内元素

关键属性：父级:diaplay:tabel; 子集：display:tabel-cell; vertical-align:middle;

 </style>

 

情况3：父级高度固定，嵌套块级元素且该元素高确定

关键属性：定位 + margin-top：负值；

<style type="text/css">*{margin:0;padding:0;}div{height:300px;width:200px;position:relative;word-break:break-all;background:#666;}p{position:absolute;top:50%;left:0;height:80px;margin-top:-40px;background:red;}</style><div><p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</div>

 

情况4：父级高度固定，嵌套块级元素且该元素高不确定

关键属性：定位 + transform：translateY(-50%);

<style>*{margin:0;padding:0;}  /*不加的话会被p或其他标签默认样式影响*/div{height:300px;width:200px;position:relative; word-break:break-all;background:#666;}p{position:absolute;top:50%;left:0;transform:translateY(-50%);}/*个人建议，被包裹的块标签就不要height，用内容将高度撑开就好*/</style><div><p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p></div>

 

情况5：父子均 定宽 定高  (水平垂直居中)

关键属性：定位 + margin：auto；

<style>*{margin:0;padding:0;}div{height:300px;width:400px;position:relative;word-break:break-all;background:#666;}p{position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;height:80px;width:200px;background:red;}</style><div><p>ddddddddddddddddddddddddddddddddddd</p>  /*水平垂直居中*/</div>

 

二、图片的水平垂直居中：

1、水平居中：

 　 1）、给img设display:inline-block;然后父级text-align：center；

　  2）、给img设display:block; 同时设margin: 0 auto;

 

2、垂直居中：

解法1：img父级display:table-cell; vertical:middle; height:xxx;

<style>div{display: table-cell;width:400px;height:300px;vertical-align: middle;text-align:center;background:#999;} /*table-cell 可以使替换元素垂直居中，强大！*/</style><div><img src="/i/eg_tulip.jpg"  width=150 height=150 alt="上海鲜花港 - 郁金香" /></div>

 

解法2：定位 + display: block; transform: translate(-50%,-50%);

<style>div{position:relative;width:400px;height:300px;text-align:center;background:#999;}img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}</style><div><img src="/i/eg_tulip.jpg"  width=150 height=150 alt="上海鲜花港 - 郁金香" /></div>

另：当已知图片大小时也可以把translate换成margin负值，这里不推荐使用。

 

解法3：定位 + margin：auto；

<style>div{position:relative;width:400px;height:300px;text-align:center;background:#999;}img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}</style><div><img src="/i/eg_tulip.jpg"  width=150 height=150 alt="上海鲜花港 - 郁金香" /></div></body

 

解法4：父级display：table; + 包裹img的元素(<span>)设为display：table-cell;

<style>div{display:table;width:400px;height:300px;text-align:center;background:#999;}span{display:table-cell;vertical-align:middle;}</style><div><span><img src="/i/eg_tulip.jpg"  width=150 height=150 alt="上海鲜花港 - 郁金香" /></span></div>

 

解法5：父级line-height == height + 行内标签配合<img>

<style>img{border:0;}div{width:500px;height:300px;line-height:300px;background:#999;font-size:0;vertical-align:middle;text-align:center;}a{display:inline-block;width:0;}  line-height == height 无法使替换元素垂直居中，所以要配合行内不可替换标签<a><span>...img{vertical-align:middle;}</style><div><a>哪怕我里面有一个字符都行</a><img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" /></div>

 

css改动以下，也可以这样玩：

<style>img{border:0;}div{position:relative;width:500px;height:300px;background:#999;font-size:0;vertical-align:middle;text-align:center;}a{display:inline-block;width:0;height:100%;vertical-align:middle;}img{vertical-align:middle;}</style><div><a>我设置了display：inline-block && height=100% 就能使这个容器的line-height = height</a><img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" /></div>

 

解法6：background实现

div{
　　width:500px;
   height:300px;
   background:#999 url(/i/eg_tulip.jpg) no-repeat center center;
}<div></div> 

 

 

下面是图片垂直水平居中的效果：

 

介于pc端对flex布局的兼容有限，暂且不谈。