水平居中与垂直居中

一. 内联元素居中（文本text、图片img、按钮button等）
给父元素设置text-align:center。
给一个例子：使若干个元素（数量可变），在一行中居中显示，可用列表实现。我们知道列表中的<li>标签元素为块级元素，故可先将其display:inline，在一行中显示，然后将<li>的父元素，<ul>水平居中显示即可

二. 块级元素居中
①定宽块级元素居中
margin:0 auto;
②不定宽块级元素居中
总共有三种方法可解：
Ⅰ.利用display:inline使块级元素内联显示；
Ⅱ.利用<table>长度自适应的特性；
Ⅲ.结合父元素，设置浮动和定位。
方法Ⅰ详见以上 内联元素水平浮动 。
方法Ⅱ：<table>是个盛放其他元素的块级容器，其宽度不默认父元素的宽，而是随其中文本长度决定，因此可看作一个定宽块级元素。
给需要水平浮动的元素设定display:table或放入<table>标签中，即可使用margin:0 auto像定宽块级元素一样居中显示了

三：利用相对定位，使父元素相对于body向右偏移50%，再使需要居中的元素相对于父元素向左偏移50%，为了防止高度塌陷设置浮动前一定要给父元素清除浮动。为了更直观的看到两div位置，给父元素加了黑色边框，子元素加了红色边框

 

垂直居中

一. 未知高度元素的垂直居中
非常好用的<table>又来啦，很简单的可以利用<td>标签默认垂直居中（无需显式的设置vertical-align: middle）的特性，让<table>铺满页面，将要居中的元素放进去即可

二.高度固定元素的垂直居中
同理使用table<td>标签默认垂直居中，可将元素放置于<table>中，或设置display:table-cell，根据需求设置<table>宽高及位置