元素居中方法

一、水平居中方式

　　行内元素：text-alien：center

　　块元素：

　　　　-已知宽度：

　　　　　　1）margin：0 auto；

　　　　　　2）position+margin组合（left：50%;margin-left:-?px）

　　　　-未知宽度：

　　　　　　1）*display：inline/inline-block

　　　　　　     *text-alien:center

　　　　　　2）position：relative；

　　　　　　　  left：50%； transform：translateX（-50%）

　　　　　　3)flex布局

　　　　　　　　display：flex；justify-content：center

二、垂直居中

已知高度：

　　对于单行文本 

　　　　1）inline-height：？px  (设置为和高度相等)

　　块元素：

　　　　1）position+margin

未知高度：

　　行内块元素

　　　　1）vertical-align:middle

　　块元素：

　　　　1）给父元素display:table，子元素display：table-cell

　　　　2）flex布局

　　　　3）position+translate

　　　　

　　　　　　

 

转载于:https://www.cnblogs.com/qqinhappyhappy/p/11584827.html