CSS 设置水平居中 垂直居中
水平居中
一:行内元素 文本 图片等
在其父元素中设置:text-align:center;
二:块元素
1:定宽块元素
设置:width:固定值。;margin-left:auto;margin-right:auto;
2:不定宽元素
方法1:为需要设置为居中的元素外加一个table标签(包括<tbody><tr><td>);为这个table设置 margin-left:auto;margin-right:auto;
方法2:改变这个块元素为display:inline,然后用text-align:center;来实现居中效果
方法3:通过给父元素设置float,然后给父元素设置:position:relative 和 left:50%,子元素设置:position:relative和left:-50%;
垂直居中
一:父元素高度确定的单行文本:
设置父元素的height和line-height的高度值来实现
二:父元素高度确定的多行文本:
方法1:使用插入table(包括tbody,tr,td标签),同时设置table的vertical-align:middle;(CSS中的垂直居中vertical-align:middle;只有在父元素是td或th时才管用)
方法2:在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display:table-cell,激活vertical-align属性,但注意,IE6、7并不支持这个样式
一个有趣的现象:元素(无论是什么类型的元素,display:none除外)设置以下2个句之一:
1:position:absolute
2:float:left或float:right
元素会自动变为display:inline-block的方式显示,就可以设置元素的weight和height,且默认宽度不占满父元素