把简单做好也不简单

1、把简单做好也不简单水平垂直居中有相同点也有不同点，接下来研究频繁的方式。如无特别解释，以下示例html均为：基础样式为： .md-warpwidth: 400px;height: 300px;max-width: 100%;border: 1px solid 000;.md-maindisplay: block;width: 100px;height: 100px;background: f00;水平居中margin法需要满足三个条件:元素定宽元素为块级元素或行内元素设置display:block元素的margin-left和margin-right都必需设置为auto 三个条件缺一不行。de

2、mo.md-mainmargin: 0 auto; 定位法需要满足三个条件：元素定宽元素肯定定位，并设置left:50%元素负左边距margin-left为宽度的一半demo1.md-warpposition: relative;.md-mainposition: absolute;left: 50%;margin-left: -50px; 有些时候我们的元素宽度可能不是固定的，不用不安，我们依旧可以用法定位法实现水平居中，此时需要用到css3中的transform属性中的translate，可以使元素移动时相对于自身的宽度和高度。需要注重，这种办法需要ie9+才可以实现。 demo2.md-

3、warpposition: relative;/ 注重此时md-main不设置width为100px.md-mainposition: absolute;left: 50%;-webkit-transform: translate(-50%,0);-ms-transform: translate(-50%,0);-o-transform: translate(-50%,0);transform: translate(-50%,0); 文字水平居中对于单行文字来说，挺直用法text-align: center即可。多行文字可以看作一个块级元素参考margin法和定位法。垂直居中定位法和水平居中类

4、似，只是把left:50%换成了top:50%，负边距和transform属性举行对应更改即可。优点：能在各扫瞄器下工作，结构容易明白，不需增强额外的标签。demo1.md-warpposition: relative;.md-mainposition: absolute;/* 核心 */top: 50%;margin-top: -50px;运用css3中的clac()属性能简化部分代码：.md-warpposition: relative;.md-mainposition: absolute;/* 核心 */top: calc(50% - 50px);demo2.md-warppositio

5、n: relative;.md-mainposition: absolute;top: 50%;/ 注重此时md-main不设置height为100px-webkit-transform: translate(0,-50%);-ms-transform: translate(0,-50%);-o-transform: translate(0,-50%);transform: translate(0,-50%); 单行文本垂直居中 需要满足两个条件：元素内容是单行，并且其高度是固定不变的。将其line-height设置成和height的值一样这是一段文字divwidth: 400px;heigh

6、t: 300px;border: 1px solid 000;spanline-height: 300px; 以上是一些常规方法，接下来是利用css3新特性实现的示例。 视窗单位的解决方法（垂直居中）假如想避开用法肯定定位，我们仍然可以利用translate办法，其值刚好是元宽度和高度的一半。但是，我们如何不用法top和left将元素从top和left移动50%的偏移量呢？首先想到的是给margin属性一个百分数，像这样：.md-mainmargin: 50% auto 0;transform: translatey(-50%);效果如下所示： 我们发觉并没有浮现预想的结果，这是由于margi

7、n的百分比计算是相对于父容器的width来计算的，甚至包括margin-top和margin-bottom。 我们假如仍然想让元素在视窗中居中，还是有救的。css3定义了一种新的单位，称为相对视窗长度单位。 以下摘自w3cplusvw是相对于视窗的宽度。与你预期刚好相反,1vw相当于视窗宽度的1%，而不是100%与vw相像的是，1vh相当于视窗高度的1%假如视窗的宽度小于高度，1vmin等于1vw，反之，假如视窗宽度大于高度，1vmin等于1vh假如视窗的宽度大于高度，1vmax等于1vw，反之，假如视窗宽度小于高度，1vmax等于1vh在上个示例的基础上，我们需要给margin设置vh单位:

8、.md-warpposition: relative;.md-mainposition: absolute;margin: 50vh auto 0;transform: translatey(-50%);注重：这种办法最大的局限是只能适用于元素在视窗中垂直居中，假如是在局部的某个地方就无能为力了。flexbox的解决计划假如不考虑扫瞄器的兼容性，flexbox无疑是最好的解决计划，由于它的浮现就是为了解决这样的问题。完成这项工作只需要两个样式，在需要水平垂直居中的父元素上设置display:flex和在水平垂直居中的元素上设置margin:auto。.md-warpdisplay:flex;.

9、md-mainmargin: auto;flexbox的实现文本的水平垂直居中同样很容易。.md-warpdisplay:flex;.md-maindisplay: flex; align-items: center; justify-content: center; margin: auto; 补充：inline-block协作伪类的解决计划.md-warp font-size: 0; .md-warp:before content:&39;&39; display:inline-block; width: 0; height:100%; vertical-align:mid

10、dle; .md-main display:inline-block; vertical-align:middle; font-size: 14px; 引自未知尺寸元素水平垂直居中实现详解首先要了解垂直方向的对齐排版需用法 vertical-align ，并且只应用于inline level, inline-block level 及 table-cells 元素上；第二 vertical-align 的对齐就基于每个 line box（行框） 的，容易的说，inline level元素根据 normal flow 水平排版出一行就会形成一个line box，其高度由内容形成，假如换行，则又是

11、另一个line box，全部一段文本可能会分布在多个line box里，这些不重叠的line box被称作为a vertical stack of line boxes（一个垂直堆叠的线框集合）这些。换句话说，我们的垂直居中是要在每个line box中举行处理。而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中，这时有个问题就是demo容器并非该行文本的line box，所以就算定义vertical-laign为middle也无法让该行文本在demo容器中垂直居中。我们知道line box的高度是由内容形成的，这时我们可以额外创建一个与该行文本处于同一line box的元素，同时将新增元素的高度定义为与demo容器相同，此时line box的高度将与demo全都，文本将会在line box内垂直居中，即同样实现了在demo容器中垂直居中。肯定垂直居中.md-warp position: relative; .md-main position: absolute; top: 0; right: 0; bottom: 0; le