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

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

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

工具/原料

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

方法/步骤

 
  1. 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

 
  • 1、margin属性0 auto

    2、position属性

    3、transform属性

    4、display:flex属性

     

相关推荐