首页 > Web开发 > 详细

css实现垂直水平居中

时间:2018-08-19 22:56:15      阅读:177      评论:0      收藏:0      [点我收藏+]

垂直居中:

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实现垂直水平居中

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!