此项目中的bootstrap版本是3.3.7 。 在某些项目进行过程中遇到组件模态框无法垂直居中，示例demo代码如下： 效果如下： 2、说明：使用modal 弹出事件方法： Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。 一、处理方式1 1、其中 “shown.bs.mo ...
分类：
其他好文 时间：
2017-10-25 11:20:04
阅读次数：
672
思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)优点：高大上,可以在webkit内核的浏览器中使用缺点：不支持IE9以下不支持transform属性 ...
分类：
Web程序 时间：
2017-10-10 20:34:36
阅读次数：
177
1.利用绝对定位 top与left设为50%，margin-left为宽度一半的负值，margin-top为高度一半的负值 此方法最常见，但仅仅适用于已知宽高的情况下。 2.绝对定位结合transform 可在未知宽高时使用，但在IE8及以前的浏览器内不支持，且内部文本可能因为移动而稍显模糊 3.利 ...
分类：
其他好文 时间：
2017-10-04 15:52:53
阅读次数：
126
寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: ce ...
分类：
其他好文 时间：
2017-10-01 17:33:59
阅读次数：
112
方法1 使用设置背景图片实现图片居中 方法2 改变容器盒子的display:teble-cell;改变了盒子display导致设置margin无效;(ie7不兼容) ...
分类：
其他好文 时间：
2017-09-28 01:03:11
阅读次数：
184
方法一 思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中优点：父元素（parent）可以动态的改变高度（table元素的特性）缺点：IE8以下不支持 方法二： 思路：使用一个空标签span设置他的vertic ...
分类：
Web程序 时间：
2017-09-27 13:29:13
阅读次数：
261
<style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-150px 0 0 -200px;width:400px;height:300px;border:1px solid #008800;}--></s ...
分类：
其他好文 时间：
2017-09-26 12:58:10
阅读次数：
171
在前端开发中，图片垂直居中对奇是很常见的，有些是固定高度，有些没有固定高度，本文分享我用的四种方法，希望对你有所启发。 以下说的做法暂不考虑IE浏览器的兼容性，适用于移动端 以下的做法中假定外层的高度和宽度已经固定。通用HTML和CSS代码： 1.相对定位+margin:auto 利用图片相对于外层 ...
分类：
其他好文 时间：
2017-09-25 22:07:00
阅读次数：
154
下面介绍的方法主要是利用display:inline-block;让元素变为行内块元素，利用vertical-align:middle来实现垂直居中,利用父元素的text-align:center;实现水平居中。一、表格方法表格本来对立面的内容是垂直居中的，所以用表格来做很适合。但是它里面的内容是行 ...
分类：
其他好文 时间：
2017-09-25 13:21:29
阅读次数：
126
