图片一直居中，并且窗口变小图片两端缩小，但是图片还是居中。-白红宇

图片一直居中，并且窗口变小图片两端缩小，但是图片还是居中。

阅读量：5822 次

发布时间：2019-06-18

本文共 1433 字，大约阅读时间需要 4 分钟。

1、无论多少行都让文字垂直居中；

小技巧 ie8以上可用；

display：table-cell；vertical-align：middle；

注意变了 table-cell就不能用float和position了，用了的话table-cell的vertical-align不生效了；

table-cell不支持margin但可以用padding；

2、让img在窗口变小时，图片一直居中显示，但不随着窗口缩写而变小，只是随着窗口缩小图片一直居中显示；

img的width设置成最大的宽度，不是百分百，而是一个具体的数值，比如1920px；

图片保持

可以加上display：block；

position：releative；

left：50%；

margin-left：-你设置的宽度的一半，如-960px；

这样窗口缩小，图片不缩小一直保持中间。

父级元素

position: relative; min-width: 600px; overflow-x: hidden;

2、居中的几种方式；

方式一：必须知道居中元素的宽高

　　　　　　　　　　top: 50%;                 left: 50%;                 margin-left:负的宽度一半;                 margin-top:负的高度一半;

方式二：必须知道居中元素的宽高

　　　　　　top: 0;                 left: 0;                 right:0;                 bottom:0;                 margin:auto;

方式三：优点是可以不知道居中元素的宽和高，但是缺点是文字会变模糊。原因是transform时div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。

　　　　　　　　　 -webkit-transform: translate(-50%,-50%);                -moz-transform: translate(-50%,-50%);                -o-transform: translate(-50%,-50%);                -ms-transform: translate(-50%,-50%);                 transform: translate(-50%,-50%);                  top: 50%;                 left: 50%;

转载于:https://www.cnblogs.com/gaidalou/p/7227275.html

你可能感兴趣的文章