css垂直水平居中问题

1、水平垂直居中方法1

对于元素不确定宽度和高度的时候,特别适用:

父元素div:display:table-cell ;vertical-align:middle;(垂直居中),text-align:center(水平居中)

子元素div:display:line-block

table-cell同样会被其他一些css属性破坏,例如float,position:absolute,所以在使用display:table-cell时,尽量不要使用float或者position:absolute

2、垂直水平居中方法2

绝对定位+transform反向偏移

position:absolute;

top:50%;left: 50% 

transform:translateY(-50%);

3、行内元素的垂直居中的方法

line-height:行高(父元素的高度)

4:块级元素水平居中的方式

margin: 0 auto;

5、行内元素水平居中的方式

text-align:center;

原文地址:https://www.cnblogs.com/jwenming/p/14446366.html