一、文本的水平垂直居中:
1、水平居中:
是不是很开心?超级简单的问题,一个text-align:center 就搞定了。过过过…
-------------------------------------下面看单行、多行文本的垂直居中-------------------------------------
2、垂直居中:
1)、单行文本
<!--只要height值等于line-height值就ok -- ><div style="height:100px;line-height:100px;">有且仅占有一行的情况下垂直居中</div>
ps:height === line-height 无法使替换元素,如、、、…垂直居中,必须有、…类似行内标签配合才能使垂直居中生效! (下面的图片垂直居中解法5 会用到这个特性)
2)、多行文本
情况1:高度固定
关键属性:display:tabel-cell; vertical-align:middle;
<style>div{height:300px;width:200px;vertical-align:middle;display:table-cell;word-break:break-all;background:#666;}</style>
<div>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
情况2:父级高度固定,嵌套行内元素
关键属性:父级:diaplay:tabel; 子集:display:tabel-cell; vertical-align:middle;
<style>div{height:300px;width:200px;display:table;word-break:break-all;background:#666;}span{display:table-cell;vertical-align:middle;}</style>
<div><span>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span></div>
情况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:定位 + 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>
解法4:父级display:table; + 包裹img的元素()设为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 + vertical-align:middle (推荐)
<style>img{border:0;}div{width:500px;height:300px;line-height:300px;background:#999;text-align:center;}img{vertical-align:middle;}</style>
<div><a>哪怕我里面有一个字符都行</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>
下面是图片垂直水平居中的效果: