css 垂直水平居中

 

水平居中方案:
水平居中设置
1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto
3、不定宽块状元素
a:元素设置 position:relative 和 left:50%,transform:tranlateX(-50%)
垂直居中设置
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle
3、块状元素垂直居中
a:元素设置 position:relative 和 top:50%,transform:tranlateY(-50%)
4、水平垂直居中
宽度不确定和确定都可以
a:元素设置 position:relative 和 top:50%,left:50%,transform:tranlate(-50%,-50%)
posted @ 2018-02-26 13:47  ls-lansy  阅读(142)  评论(0编辑  收藏  举报