一、水平居中总结-不定宽块状元素方法
不定块状元素居中方法
下面来详细介绍一下这几种方法：
1.加入table标签
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
步骤：(1)为所要设置的元素添加<table>标签（包括<tbody>,<tr>,<td>）。
(2)为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
2.改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用text-align:center来实现居中效果
代码如下：.container ul
{ list-style:none;
margin:0;
padding:0;
display:inline;}
.container{
text-align:center;}
3.通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。
代码如下：
.container{
float:left;
position:relative;
left:50%}
二、垂直居中-父元素高度确定的单行文本
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。这里我们又得分两种情况：
(1)父元素高度确定的单行文本
(2)父元素高度确定的多行文本
三、垂直居中-父元素高度确定的多行文本
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入table(包括tbody、tr、td)标签，同时设置vertical-align：middle。
css中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
代码如下：
<body>
<table>
<tbody>
<tr>
<td class="wrap">
<div><p>实现居中</p></div>
</td>
</tr>
</tbody>
</table>
</body>
方法二、在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性，但注意IE6、7并不支持这个样式,兼容性比较差。
方法三、隐性改变display类型
2. float : left 或float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。
设置行内元素的width是 没有效果的，但是设置为position:absolute以后，就可以设置width了。
网友评论