• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • YouClaw
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
*Lucas*
博客园    首页    新随笔    联系   管理    订阅  订阅

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,

 

posted @ 2018-08-19 22:47  *Lucas*  阅读(201)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3