1.水平居中:
>文本、图片等行内元素——给父元素设置 text-align: center
>定宽块状元素——左右margin设置为auto
>不定宽块状元素:
加入table标签——利用table标签长度自适应,可以看作定宽元素,然后利用左右margin设置auto实现居中
设置display: inline——父控件text-align: center,子控件display:inline
position: relative && left: 50%:
父元素float,relative,left50%,子元素relative,left-50%
.container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; }
2.垂直居中:
>父元素高度确定的单行文本——设置height=line_height,弊端——超出宽度时会脱离块
>父元素高度确定个多行文本:
使用table,同时设置vertical-align: middle(td标签默认此属性),对inline-block类型的子元素有用
display: table-cell
3.隐式改变display类型:
当元素设置了:
position: absolute
float: left 或 right
元素会自动变为 display: inline-block。
比如设置了absolute后就可以设置宽高了