Android 居中展示的Toast

1.水平居中布局

---

实现不定宽盒子的水平居中效果。

---

一，display: inline-block; text-align: center;

---

解决方案代码如下

注意 ： text-align: center 是对内联元素起作用。会被子元素继承。

**这个方法的优点是兼容性好**
虽然在IE6,IE7下面不支持display: inline-block这个属性，但是可以用display: inline   zoom : 1两者的使用模仿display: inline-block;
**缺点在于**
我们看到它在父元素.parent中设置了text-align: center;  这个属性会被子元素继承，那么.child内的文字也会居中。修复办法是在.child中重新修改text-algin样式。

---

---

二， table + margin

---

解决方案代码如下

首先对.child{
    display: table;
}
table的特点在表现上像是一个block元素，但是区别在与display: table元素的宽度跟内容同宽。
所以利用表现上像block元素这个特点，采用margin: 0 atuo; 有效居中。

优点在于:
--不用对父元素进行关心，只需要自己进行设置就可以了
--display: table 属性在IE8及之后有效。如果要兼容到IE6，7就需要换掉结构。换成table结构。

---

---

三，absolute + transform

---

解决方案代码如下

缺点：
因为transform是CSS3中的属性，所以不兼容IE6,7,8.在高版本里面也可能要加一些私有的前缀

---

---

四， flex + justify-content

---

父元素成为flex容器   它的子元素自动成为flex item.
flex item元素宽度默认为auto。  
缺点：
兼容性，不兼容IE6,7,8。
优点：
不用关心子元素的设置。

---

---

2. 垂直居中

---

要求：高度不定的父元素和子元素，子元素子啊父元素中垂直居中。将图中的DEMO区域居中

一， table-cell + vertical-align

---

解决方案代码如下：

注：vertical-align属性在inline, inline-block, table-cell属性元素上有效

---

兼容性：在IE8及其以上有效，如果要兼容IE6,7就要把结构换为table结构。

---

---

二，absolute + transform

---

解决方案代码如下

---

优点：因为脱离文档流 子元素不会干扰其他元素
缺点： 兼容性。

---

---

3. flex + align-items

---

1.第一步先设置display: flex; 因为在垂直方向上的拉伸特性，子元素会垂直充满父元素。

2.增加align-items: center;

---

优点： 不设置子元素。
缺点： 只兼容高版本的浏览器

---

---

完全居中

---

要求：在水平和垂直方向上都居中。父元素盒子，子元素盒子宽高都不一定。

---

inline-block + text-align + table-cell + vertical-align

---

原始状态：如图

1.先水平居中

2.垂直居中

---

优点： 兼容性比较高。

---

---

absolute + transform

---

解决方案代码如下

---

优点：
这个解决方案的优点在与子元素是absolute，所以不会对其他元素影响。
缺点：兼容性

---

---

flex + justify-content + align-items

1.display: flex

---

2.justify-content

---

3.align-iemts: center;

---

优点： 只设置了父元素。
缺点：仍然是兼容性。

---