感谢内容提供者：金牛区吴迪软件开发工作室
文章目录
-
- 元素在其父元素的垂直和水平方向都居中的方法
-
- 1. 第一步：基础html
- 2. 第二步：CSS实现效果
-
- ①定位方法(1)
- ②定位方法(2)
- ③改变父元素和子元素的display(不推荐使用)
- ④css3的弹性盒方法
- ⑤使用translate改变位置实现
- ⑥使用grid布局实现
- 结语：
元素在其父元素的垂直和水平方向都居中的方法
1. 第一步：基础html
话不多说直接上代码！！！
html代码统一如下：
复制到你的 .html目录下的<body></body> 标签里面
以下为CSS代码：
复制到你的 .html目录下的<head><style></style></head> 里面,或者引入外部样式表，将此代码放到你的 .css 文件里，
注意：link标签的href指定的文件位置不要搞错了哦。
2. 第二步：CSS实现效果
①定位方法(1)
②定位方法(2)
③改变父元素和子元素的display(不推荐使用)
④css3的弹性盒方法
但是display：flex属性小伙伴们要注意一下它的兼容问题哦~图片上标红的版本的浏览器就是不支持该属性的哦。
结语：
如果小伙伴们还知道什么其他的方法欢迎给笔者留言评论哦~笔者感激不尽，也能帮助其他看笔者博客的朋友们。谢谢大家！
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！