css实现垂直水平居中

垂直居中:

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,

猜你喜欢

转载自www.cnblogs.com/-Lucas-/p/9503099.html