translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于 ...
分类：
其他好文 时间：
2018-11-21 10:21:58
阅读次数：
1830
以上方法在Android上显示水平垂直居中， 但在IOS上只能水平居中, 方法是在IOS上添加lineHeight: 100, 如下 别忘了在react-native模块中导入组件 StyleSheet和Platform ...
分类：
其他好文 时间：
2018-11-20 17:11:08
阅读次数：
409
(1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可，例如： <div style="width: 600px; height: 300px; border:1px solid red;text-align: cent ...
分类：
Web程序 时间：
2018-11-19 16:15:35
阅读次数：
245
常用前端布局，CSS技巧介绍 对前端常用布局的整理总结，并对其性能优劣，兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 元素高度可变，需要元素内部元素水平垂直居中（主要是垂直）方案 对于单行文本和多行文本超出部分 ... 自定义文本选择样式 杂项 css变量使用 查看详情 border为1 ...
分类：
Web程序 时间：
2018-11-11 19:12:07
阅读次数：
169
使用flex 定位方式： margin:auto; ...
分类：
其他好文 时间：
2018-10-25 15:44:42
阅读次数：
118
总结一下，最经典的面试题 分两种情况，宽高确定和不定宽高 （一）宽高确定 初始条件如下： 1. 绝对定位 + 负margin 里面的盒子相对于父盒子绝对定位，距离上面和左边分别为50%，此处的50%是相对于父元素的高和宽， 然后通过margin-left 和 margin-top 设置为负值，使元素 ...
分类：
Web程序 时间：
2018-10-24 10:43:43
阅读次数：
177
方法一：使用position 元素已知宽度 方法二：position tranform 元素宽度未知 得到的效果和上图一样 当使用这种方法将文字放在div水平垂直的位置的时候，会出现字体边缘模糊的结果，解决方法是：使用flex完成垂直居中,设置排列方向为column,并设置justify-conte ...
分类：
Web程序 时间：
2018-10-23 23:09:38
阅读次数：
180
第一种： #container{ position:relative;} #center{ width:100px; height:100px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);} 这种方法能 ...
分类：
其他好文 时间：
2018-09-26 14:22:39
阅读次数：
158
div水平垂直居中方法一： div水平垂直居中方法二： img水平垂直居中方法： ...
分类：
Web程序 时间：
2018-09-17 00:01:28
阅读次数：
242
方法一 ：table、cell-table 思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中优点：父元素（parent）可以动态的改变高度（table元素的特性）缺点：IE8以下不支持 <!DOCTYPE h ...
分类：
Web程序 时间：
2018-09-11 01:09:04
阅读次数：
214
