码迷,mamicode.com
首页 > Web开发 > 详细

css水平垂直居中的几种方法

时间:2019-12-31 18:25:14      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:修改   build   打开   nbsp   index   for   文件   元素   elf   

在使用HTML5+CSS3进行页面布局时,可以进行排列不同的形式。那么,如何设置元素为水平垂直居中显示呢?

技术图片
 

工具/原料

 
  • CSS3
  • HTML5
  • HBuilderX
  • 截图工具
  • 浏览器

方法/步骤

 
  1. 1

    双击打开HBuilderX开发工具,新建一个HTML5页面,输入文件名并点击创建按钮

    技术图片
  2. 2

    打开已新建文件,向<body></body>标签中插入父子div并设置class属性

    技术图片
  3. 3

    添加style标签元素,分别使用class选择器设置父子div的样式,设置margin属性值

    技术图片
  4. 4

    保存代码并运行项目,打开浏览器查看效果,可以发现字体水平垂直居中显示

    技术图片
  5. 5

    接着修改代码,将margin属性改为position,并分别设置div的样式

    技术图片
  6. 6

    将position属性和transform属性结合起来使用,设置top和left属性值

    技术图片
  7. 7

    去掉position属性,然后设置display值为flex,并添加justify-content和align-items属性

    技术图片
    END

总结

 
  • 1、margin属性0 auto

    2、position属性

    3、transform属性

    4、display:flex属性

     

css水平垂直居中的几种方法

标签:修改   build   打开   nbsp   index   for   文件   元素   elf   

原文地址:https://www.cnblogs.com/45ddf4/p/12125596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!