首页 > 开发 > 前端 > 正文

元素的水平居中和垂直居中

2016-07-25 21:26:32  来源:慕课网
  水平居中设置:
行内元素水平居中通过给父元素设置text-align:center;来实现。
块状元素分为定宽块状元素(块状元素的宽度width为固定值)和不定宽块状元素
定宽块状元素可以通过设置margin:auto;来实现居中。
不定宽块状元素的三种居中方法:
1.加入teble标签,利用table标签的长度自适应---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽块元素,然后利用定宽块元素居中的margin的方法,使其水平居中。
2.改变块级元素的display为inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果。
3.通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
垂直居中设置:
父元素高度确定的单行文本的垂直居中方法是:设置父元素的height和line-height高度一致来实现的。
父元素高度确定的多行文本垂直居中:
1.使用插入table(包括tbody、tr、td)标签,同时设置vertical-align:middle
2.在chrome、Firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell(设置为表格单元显示),激活vertical-align属性,但是注意IE6/7并不支持这个样式,兼容性差。