当前位置：首页 > Web开发 > 正文

css程度垂直居中的几种要领

2024-03-31 Web开发

在使用HTML5+CSS3进行页面构造时，可以进行摆列差此外形式。那么，如何设置元素为程度垂直居中显示呢？

工具/原料

CSS3

HTML5

HBuilderX

截图工具

浏览器

要领/法式

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

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

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

生存代码并运行项目，打开浏览器检察效果，可以发明字体程度垂直居中显示

接着改削代码，将margin属性改为position，并分袂设置div的样式

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

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

END

总结

1、margin属性0 auto

2、position属性

3、transform属性

4、display:flex属性

法式阅读

css程度垂直居中的几种要领

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32570.html