CSS子盒子水平和垂直居中的五种方法


Posted in HTML / CSS onJuly 23, 2022

首先创建互相嵌套的两个盒子

CSS子盒子水平和垂直居中的五种方法

浏览器中打开,盒子的样式为:

CSS子盒子水平和垂直居中的五种方法

接下来是让子盒子水平和垂直居中的五种方法:

方法一:利用文本水平居中text-align: center和行高line-height进行实现

可以先通过display将子盒子转换为行内块显示模式,然后利用文本水平居中和行高获得最终子盒子的水平和垂直居中。由于对齐方式的不同,需要给子盒子添加vertical-align: middle;

CSS子盒子水平和垂直居中的五种方法

方法二:利用子绝父相和外边距margin实现

先为父盒子设置相对定位,再为子盒子设置绝对定位,且绝对定位的四个方向的位移都设为0,然后将外边距margin属性值设置为auto即可。

CSS子盒子水平和垂直居中的五种方法

方法三:利用子绝父相和左、上外边距实现

先为父盒子设置相对定位,再为子盒子设置绝对定位,且将子盒子分别向右、向下移动父盒子的一半,然后利用外边距margin将子盒子分别向左、向上移动子盒子的一半。

CSS子盒子水平和垂直居中的五种方法

方法四:利用子绝父相和位移实现

先为父盒子设置相对定位,再为子盒子设置绝对定位,且将子盒子分别向右、向下移动父盒子的一半,然后利用位移transform: translate;将子盒子分别向左、向上移动子盒子的一半。

CSS子盒子水平和垂直居中的五种方法

方法五:利用flex布局实现

首先在父元素中添加display:flex;使其显示模式为flex布局模式,然后在父元素中添加主轴居中和侧轴居中即可。 

CSS子盒子水平和垂直居中的五种方法

最终结果显示为:

CSS子盒子水平和垂直居中的五种方法

到此这篇关于CSS子盒子水平和垂直居中的五种方法的文章就介绍到这了,更多相关CSS子盒子水平和垂直居中内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 #HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 #HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 #HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 #HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 #HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 #HTML / CSS
使用HBuilder制作一个简单的HTML5网页
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php中namespace use用法实例分析
2016/01/22 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
JavaScript 原型与继承说明
2010/06/09 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Python实现二分查找算法实例
2015/05/26 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
使用python3实现操作串口详解
2019/01/01 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
广州盈通面试题
2015/12/05 面试题
TCP/IP模型的分界线
2012/12/01 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
汽车运用工程毕业生自荐信
2013/10/29 职场文书
餐饮投资计划书
2014/04/25 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
佛光寺导游词
2015/02/10 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis