本篇文章给大家带来的内容是介绍css实现垂直居中的6种方法（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
html结构
垂直居中
默认css样式结构
.box{ width:200px; height:200px; background-color:green; }.content{ background-color:yellow; }
1. table-cell
该方法兼容IE8+，火狐，谷歌，并且content是否有宽高都可以。 注：IE8+ 包含 IE8
立即学习“前端免费学习笔记（深入）”；
.box2{ display:table-cell; //此元素会作为一个表格单元格显示（类似 和 ） text-align:center; //左右居中 vertical-align:middle; //上下居中 }
2. display: flex;
该方法不兼容IE8，IE9，content是否有宽高都可以。兼容火狐、谷歌
参考flex布局：https://www.cnblogs.com/qingchunshiguang/p/8011103.html
.box2{ display: flex; justify-content:center; //左右居中 align-items:center; //上下居中}
3. 绝对定位和负边距
该方法兼容IE8+，火狐，谷歌，content必须有宽高。
.box2{ position:relative;}.content2{ position:absolute; top:50%; left:50%; margin-top:-40px; margin-left:-40px;}
4. 绝对定位和0
该方法兼容IE8+，火狐，谷歌，content必须有宽高。
.box2{ position:relative;}.content2{ margin:auto; position:absolute; top:0; left:0; right:0; bottom:0;}
5. 绝对定位和transform
该方法不兼容IE8，兼容IE9+，火狐，谷歌，content是否有宽高都可以。
.box2{ position:relative;}.content2{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
6. display:flex 和 margin:auto
content有宽高：不兼容IE8，IE9，content没有宽高：不兼容IE。有无宽高都兼容火狐、谷歌。
.box2{ display: flex; text-align: center;}.box2 .content2{margin: auto;}
以上就是css实现垂直居中的6种方法（代码示例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612761.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
css中display:table和display:table-cell的合用的妙处
上一篇
2025年12月24日 03:11:45
如何使用纯CSS实现一张纪念卓别林的卡片（附源码）
下一篇
2025年12月24日 03:12:06
相关推荐
-
如何使用纯CSS实现一张纪念卓别林的卡片（附源码）
本篇文章给大家带来的内容是关于如何使用纯css实现一张纪念卓别林的卡片（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom…
-
css中display:table和display:table-cell的合用的妙处
本篇文章给大家带来的内容是介绍css中display:table和display:table-cell的合用的妙处 。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊…
-
实例示范CSS中伪类选择器hover的使用方法
在页面布局时，经常会用到css中的hover选择器，它可以设置鼠标经过时的特殊样式，作为一个前端开发人员，你知道css伪类选择器hover怎么使用吗？这篇文章就和大家讲讲css中hover的使用方法及实例示范，有一定的参考价值，感兴趣的朋友可以看看。 伪类选择器hover可以在鼠标移到链接上时设置一…
-
css怎么设置字体加粗样式
css设置字体加粗样式的方法：首先创建一个HTML示例文件；然后在body中定义一些文字内容；最后通过“font-weight:bold;”或“font-weight:bolder;”属性设置字体加粗样式即可。 本文操作环境：Windows7系统、Dell G3电脑、HTML5&&C…
-
如何使用纯CSS实现打开内容弹窗的交互动画（附源码）
本篇文章给大家带来的内容是关于如何使用纯css实现打开内容弹窗的交互动画（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 立即学习“…
-
如何实现图片在页面中宽高一直保持16：9的比例
本篇文章给大家带来的内容是关于如何实现图片在页面中宽高一直保持16：9的比例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 目标：遇到一个需求，让图片在页面中，不管宽度如何变化。宽高保持16：9的比例。 实现： 方法一：这也是比较经典的一个方法，利用padding-bottom来实…
-
css+html如何实现物流进度样式（代码示例）
本篇文章给大家带来的内容是介绍css+html如何实现物流进度样式（代码示例），有需要的朋友可以参考一下，希望对你们有所帮助。 效果： css样式： ul li { list-style: none; } .package-status { padding: 18px 0 0 0 } .packag…
-
分享HTML和CSS实现的炫酷登录页面代码
大家在浏览网站时有没有发现，几乎每个网站都会要求你注册或登录，那作为一个前端开发人员，你知道html登录页面怎么制作吗？这篇文章就给大家分享一个由html 和css实现的炫酷的登录页面代码，有一定的实用价值，感兴趣的朋友可以参考一下。 制作这个炫酷的登录页面需要用到很多CSS中的属性，比如box-s…
-
实例讲解CSS中相对定位和绝对定位的用法和区别（图文）
css中的position属性可以设置元素的定位类型，比如fixed，relative，absolute等等，但是很多人搞不懂relative相对定位和absolute绝对定位的区别，这篇文章就和大家讲讲什么是绝对定位，什么是相对定位，以及相对定位和绝对定位的区别，有一定的参考价值，感兴趣的朋友可以…
-
css怎么重置样式？网页中8种css默认样式重置代码汇总
本篇文章给大家带来的内容是介绍css怎么重置样式，总结了一些常用css默认样式重置的代码分享给大家。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 在网页设计开发时，让人最头疼的莫过于让页面兼容各大浏览器，准确些是兼容它们“默认”的CSS样式表。那么，“抹掉”这些css默认样式表成…
-
如何利用css实现圆形效果？（代码实例）
本篇文章给大家带来的内容是关于如何利用css实现圆形效果？（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 之前我们知道，CSS3动画效果由3大部分组成：变形、过渡和动画。前2章，我们已经对变形效果和过渡效果进行详细地讲解。这一章我们来讲解CSS3中“真正”的动画效果。 …
-
flex-shrink如何计算？flex-shrink的计算方法介绍
本篇文章给大家带来的内容是关于flex-shrink如何计算？flex-shrink的计算方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 先回顾一下flex-grow 假设有一个div内包含三个子div1， div2, div3,宽度分别200px.对于flex-grow对…
-
CSS什么是继承？CSS如何使用？
本篇文章给大家带来的内容是介绍css什么是继承？css如何使用？有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。 CSS的继承 css的继承指的是当标签具有嵌套关系时，内部标签自动拥有外部标签的不冲突的样式的性质。 在Css中有些属性不允许继承，例如，border属性没有继承性。多边框…
-
CSS选择符是什么？CSS选择符有哪些？
本篇文章给大家带来的内容是介绍css选择符是什么？css选择符有哪些？有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。 W3School离线手册(2017.03.11版)下载：https://pan.baidu.com/s/1c6cUPE7jC45mmwMfM6598A 选择符指的是要…
-
如何使用CSS和Vanilla.js实现展示苹果设备的交互动画（附源码）
本篇文章给大家带来的内容是关于如何用css和vanilla.js实现展示苹果设备的交互动画（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代…
-
如何使用纯CSS实现万圣节的toggle控件（附源码）
本篇文章给大家带来的内容是关于如何使用纯css实现万圣节的toggle控件（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 效果预览 源代码地址 https://github.com/shanyuhai123/learnCSS/tree/master/0159-hallow…
-
CSS 3D实现旋转球是如何实现的？（代码案例）
本篇文章给大家带来的内容是关于css 3d实现旋转球是如何实现的？（代码案例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 废话不多说了，直接给大家贴代码了，具体代码如下所示： zimv-css 3d ballbody{padding: 100px 0 0 150px;}.wra…
-
图文详解CSS中rgba，rgb和opacity之间的区别
css中设置背景颜色的方式有很多，比如background-color，rgb，rgba等等，那你知道rgba，rgb和opacity之间的区别吗？这篇文章就给大家讲讲rgba，rgb和opacity之间的区别，有一定的参考价值，感兴趣的朋友可以参考一下。 rgb和rgba的区别： rgb就是指红色…
-
CSS实现富有创意的页面加载（loading）动画效果
小伙伴们在浏览网站时有没有遇到页面“loading中，请稍后”的情况，作为前端工程师，你会用css制作页面加载（loading）动画效果吗？这篇文章给大家分享一个富有创意的页面加载（loading）动画代码，有一定的参考价值，感兴趣的朋友可以看看。 制作一个富有创意的页面加载（loading）动画需…
-
什么是BFC？BFC的深入解析
本篇文章给大家带来的内容是关于什么是bfc？bfc的深入解析 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位…
微信扫一扫 
支付宝扫一扫 
