让一个元素水平垂直居中的几种方法 1.方法一——margin负 优点：兼容性好; 缺点:必须已知元素的宽高； 2.方法二——translate负50% 注意：该方法使用css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器 3.方法三——margin:auto 优点：兼容性较好；缺点:不支持IE ...
分类：
其他好文 时间：
2018-02-26 16:23:18
阅读次数：
175
在前端开发制作中，图片垂直居中对齐是很常见的，有些是固定高度，有些没有固定高度，本文分享我用的四种方法，希望对你有所启发。 来源：http://caibaojian.com/img-vertical-middle.html 以下说的做法暂不考虑IE浏览器的兼容性，适用于移动端，对兼容性感兴趣的可以看 ...
分类：
其他好文 时间：
2018-02-14 10:33:34
阅读次数：
201
1.水平居中的 margin:0 auto; 这个是用于子元素上的，前提是不受float影响 2.水平居中 text-align:center; 代码实例如上 3.水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半 4.水平垂直居中（二）定位和margin:auto; 这个方法也很实 ...
分类：
Web程序 时间：
2018-02-04 22:54:07
阅读次数：
477
1.在做数据展示的时候，因为后台没有数据，为了提示用户没有数据，自己手写了一个div中间显示一个“暂无数据的字样”， 然后控制显示和隐藏，这样方法有两种： 第一种：设置display隐藏，但有一个问题，因为我的div中用了display:table-cell,所以起了冲突， 第二种：更改z-inde ...
分类：
其他好文 时间：
2018-01-26 18:56:29
阅读次数：
218
纯CSS实现图片水平垂直居中于DIV（图片未知宽高） ...
分类：
Web程序 时间：
2018-01-24 10:57:40
阅读次数：
162
经常学到一些布局方法，但总是学了就忘，忘了又学。现在把它总结起来，即使后面又忘了，也可以打开来看看。 单列水平垂直居中 1. table cell+vertical align;inline block 2. 绝对定位 一列定宽，一列自适应 圣杯布局&双飞翼布局 多列布局 ...
分类：
其他好文 时间：
2018-01-22 10:58:50
阅读次数：
116
实现一个元素水平垂直居中的方法很多： 元素未知宽高 width和height的fit-content值只支持Chrome和Firefox浏览器 元素已知宽高 大家对这个应该是很了解的，也是实际开发中运用最多的，推荐给刚刚入门的小伙伴吧。 设置它的父元素为position:relative即可： 第一 ...
分类：
Web程序 时间：
2018-01-16 12:20:22
阅读次数：
165
通过之前总结水平居中与垂直居中的基本方法，梳理垂直水平同时居中的方法就没有那么乱了。 text-align：center + line-height 如下图，div2中用text-align+line-height实现单行文本水平垂直居中。 通过之前总结水平居中与垂直居中的基本方法，梳理垂直水平同时 ...
分类：
Web程序 时间：
2018-01-14 22:49:29
阅读次数：
146
水平垂直居中的布局解决方案有很多，本文仅仅列出三种。 在浏览器里的显示效果： 第一种：利用flex来布局，也是最常用的方式： 第二种：绝对定位加CSS3的2D转换的方式。 第三种：绝对定位并使四个方向上均为0加margin：auto；具体代码如下： 以上三种方案的HTML部分： ...
分类：
Web程序 时间：
2018-01-13 12:56:29
阅读次数：
222
body结构 方法一： 将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。 结果如下图所示： 方法二： 通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位 ...
分类：
其他好文 时间：
2018-01-04 14:15:24
阅读次数：
173
