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正方体旋转示例代码
Aug 08 HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP编程与应用
2006/10/09 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
Python生成验证码实例
2014/08/21 Python
Python实现将xml导入至excel
2015/11/20 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
铲车司机岗位职责
2014/03/15 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
高一军训决心书
2015/02/05 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers