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%)
原文地址:https://www.cnblogs.com/liangshuang/p/8472788.html