您现在的位置是:孟垂博自媒体博客 ✈ 学习笔记

css3垂直居中两种通用写法(未知宽高)

07-31最后更新时间:2019-12-10已收录人已围观收藏

简介场景1:单模块的垂直居中
场景2:多模块的垂直居中

1.单模块的垂直居中写法:(不确定内部模块宽高的情况):不管宽度怎么变化,居中的样式是不变的。
.juzhong{
position:absolute;
top 50%;
left 50%
transform: translate(-50%, -50%);
}
css3垂直居中两种通用写法(未知宽高)css3垂直居中两种通用写法(未知宽高)css3垂直居中两种通用写法(未知宽高)
2.多模块的垂直居中:(每个内部模块的宽度高度都不相同)
.juzhong{
   display:flex;
   justify-content: center;   
   align-items: center;  
 }
图:
css3垂直居中两种通用写法(未知宽高)
《css3垂直居中两种通用写法(未知宽高).doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

文档为doc格式

很赞哦! ()

文章评论

站点信息

  • 建站时间2019年06月15日
  • 网站程序:帝国CMS7.5
  • 博客模板:可免费共享
  • 文章统计:161篇文章
  • 时间卷轴时间轴
  • 标签管理标签云
  • 网站地图XML网站地图
  • 微信二维码:扫描一下,你我就是有缘