垂直居中 1、position: relative; 理解：relative是相对的意思，这里是相对于父元素 2、top: 50%; 理解：高度是50%，指的是父无素的高度的50%。 3、transform: translateY(-50%); 理解：向上移动自身元素高度的50%。 水平居中 下面是 ...
分类：
Web程序 时间：
2018-03-29 16:00:25
阅读次数：
620
一.水平居中 1.文字水平居中 <div class="one"> 测试居中 </div> <style> .one{ width: 200px; height: 100px; border:1px solid red; text-align: center; } </style> 2.盒子居中 < ...
分类：
其他好文 时间：
2018-03-28 18:58:14
阅读次数：
193
水平居中 垂直居中 定位 1. margin：0 auto； 此方法只能进行水平居中且对浮动元素和绝对定位元素无效； 对子元素进行设置。 2.text-align:center; 只能对图片，按钮，文字等行内元素（display为inline或inline-block等）进行水平居中。IE6、7能对 ...
分类：
Web程序 时间：
2018-03-27 12:24:59
阅读次数：
242
CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。 ...
分类：
Web程序 时间：
2018-03-25 11:56:14
阅读次数：
267
（1）单列布局：水平居中：1>div 使用父标签text-align:center和子标签display:inline-block 。优点：兼容性好；不足：需要同时设置子元素和父元素2>使用margin:0 auto来实现。优点：兼容性好缺点: 需要指定宽度3>使用table实现display: t ...
分类：
其他好文 时间：
2018-03-24 17:55:19
阅读次数：
124
前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。 一.居中布局 水平居中 1.使用inline-block+text-align (1)原理、用法 原理：先将子框由块级元素改变为行内块元 ...
分类：
Web程序 时间：
2018-03-21 11:33:59
阅读次数：
212
一、水平居中 一,二,三章都是parent+son的简单结构,html代码和效果图就不贴出来了,第四章以后才有 (1)文本/行内元素/行内块级元素▲ 原理：text-align只控制行内内容(文字、行内元素、行内块级元素)如何相对他的块父元素对齐 #parent{ text-align: cente ...
分类：
Web程序 时间：
2018-03-20 10:35:08
阅读次数：
492
失效原因： 当元素 float 后元素身上发生了什么： 滥用float会导致各种bug，诸如：Incorrect Float Shrink-Wrap Bug、Float Squeeze Weird Gap Bug、Float Squeeze Duplicate Last Character Bug、 ...
分类：
其他好文 时间：
2018-03-17 22:06:35
阅读次数：
226
居中布局 水平居中 1）使用inline-block+text-align 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。 用法：对子框设置display:inline-block，对父框设置text-align:center。 缺点:child里的文字也会水平居 ...
分类：
Web程序 时间：
2018-03-10 15:48:42
阅读次数：
219
