文字水平垂直居中

这是结构

p{margin:0}

 

水平居中：

(1). 直接在父集text-align:center,即：div{text-align:center}

(2). p{display:table; margin:0 auto;}

(3). div{display:flex;}    p{margin:0 auto}

(4). div{display:flex;  justify-content:center}

(5). div{position:relative}   p{position:absolute; left:50%; transform:translateX(-50%)}

 

垂直居中：

(1). 直接在父集使用line-height,即：div{line-height:XXpx}

(2). div{display:table-cell; vertical-align:middle}   注意：vertical-align只对内联元素有效，并且不能与绝对定位同时使用

(3). div{position:relative;}  p{position:absolute; top:50%; transform:translateY(-50%)}

(4). div{display:flex; align-items:center}

 

水平垂直居中：

(1). div{text-align:center;  line-height:XXpx;}

(2). div{position:relative;}  p{position:absolute; left:50%; top:50%; tranform:translate(-50%,-50%);}

(3). div{text-align:center; display:table-cell; vertical-align:middle;}  p{display:inline-block;}

(4). div{display:flex; justify-content:center; align-items:center;}

 

这里总结了几种可以水平垂直的方法，欢迎补充。