css实现垂直水平居中

标签：css   水平   tom   高度   行内元素   flex   lex   行高   文本   

垂直居中：

1，单行文本，行高等于高，即line-height等于父级的高；

2，多行文本，父级设置相对定位：position:relative，子集设置绝对定位,position:absolute;先定位到50%的位置，即top:50%, 在往上提自身的50%，即margin-top:-自身高度的一半；

3，垂直居中行内元素，vertical-align:middle;他是相对兄弟级行高来定位的，并且他们仅对行内元素有效；

4，绝对定位居中法：子元素：position:absolute-top:0;bottom:0;

5,弹性盒子，父级设置属性弹性盒子即display:flex;还有algin-items:center;

水平居中：

1，文本居中，text-algin:center,

2,margin:0 auto 居中固定宽度的块级元素；

3，绝对定位position left:50% margin-left:-50%的自身宽，

4，弹性盒子，justify-content:center,

css实现垂直水平居中

标签：css   水平   tom   高度   行内元素   flex   lex   行高   文本   

原文地址：https://www.cnblogs.com/-Lucas-/p/9503099.html