CSS中实现div元素水平垂直居中
常用7种实现水平垂直居中方法:
1、行内元素水平垂直居中
2、绝对定位 + margin
3、绝对定位+margin:auto
4、绝对定位 + translate
5、flex 布局
6、flex+margin:auto
7、table-cell
方法 | 实现代码 | 注意事项 | 案例 |
---|---|---|---|
行内元素水平垂直居中 | line-height:35px;text-align:center; | line-height属性只针对文字垂直居中有效 | 案例1 |
绝对定位 + margin | 给子元素加如下代码position:absolute;top:50%;margin-top:-元素自身高度一半left:50%;margin-left:- 元素自身宽度一半 | 需要指定子元素的宽高 | 案例2 |
绝对定位+margin:auto | 给子元素加上如下代码:position:absolute;margin:auto; | 需要给子元素指定宽高如果不指定宽高,子元素将占满父容器 | 案例2 |
绝对定位 + translate | 给子元素加上如下代码:position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) |
无需指定子元素的宽高,推荐 因为 translate() 函数中使用百分比值时,是以这个元素自身的宽度和高度为基准进行换算和移动的(动态计算宽高)
|
案例3 |
flex 布局 | 给父元素加上如上代码display:flex;justify-content: centeralign-items: center | 父元素中所有子元素都水平垂直居中显示 | 案例4 |
flex+margin:auto | 给父元素加下如下代码display:flex;给需要水平和垂直居中的子元素加上margin:auto; | 指定某一个子元素水平和垂直居中 | 案例4 |
table-cell | 给父元素加上如下代码 display: table-cell; text-align: center;vertical-align: middle; | display: table-cell属性也会被float, position: absolute等 属性破坏效果,应避免同时使用同时margin值是没有任何意义的 | 案例5 |
1、行内元素水平垂直居中
方法一:文字水平垂直居中,父元素加上如下代码:
line-height:高度大小值; //垂直居中
text-align:center; //水平居中
这里要特别注意,这种方式并
不能
让图片相对文字在单行中垂直居中
方法二:图片相对文字在单行中垂直居中,在方 法一基础上加上如下代码
vertical-align: middle; //图片与文字垂直居中,但会有少量偏差,再通过
position:relative; //通过相对定位微调元素位置
top:2px; //微调位置大小
2、绝对定位 + margin(需要指定子元素的宽高)
方法一:给子元素加如下代码
position:absolute;
top:50%;
margin-top:-自身高度一半 ;
left:50%;
margin-left:- 自身宽度一半 ;
不足之处:要求指定子元素的宽高,才能写出
margin-top
和margin-left
的属性值。
方法二: 给子元素加上如下代码
position:absolute;
margin:auto;
不足之处:要求指定子元素的宽高,如果不指定宽高,子元素将占满父容器
如果元素的宽高会随着内容发生变化,则以上两种方法都不能用,否则ok
3、绝对定位 + translate(无需指定子元素的宽高,推荐)
这种写法,在没有指定子元素宽高的情况下,也能让其在父容器中垂直居中。因为 translate() 中使用百分比值
时,是以这个元素自身的宽度和高度为基准进行换算和移动的
(动态计算宽高)。
给子元素加下如下代码
position:absolute; top:50%; left:50%;
transform: translate(-50%,-50%); 向左和向上移动自身宽度一半
4、flex 布局
方法一:给父元素加上如上代码
display:flex; //弹性布局
justify-content:center; //子元素相对父元素水平(主轴)居中
align-items:center; //子元素相对父元素垂直(交叉轴)居中
不足之处:父容器里的
所有子元素们都垂直居中了
。(如果父容器里有多个子元素的话,我们只想指定某个子元素居中,则可以用方法二。
方法二:给父元素和子元素分别加上如下代码
display:flex; //给父元素加,弹性布局
margin:auto; //给子元素加
5、table-cell 布局
display: table-cell;指让标签元素以表格单元格
的形式呈现,使元素类似于td标签
。
不过会被float, position: absolute等属性破坏效果,应避免同时使用。
同时margin值是没有任何意义的
应用一:内容整体水平垂直居中
给父元素加上如下代码
|
如果子项是块级元素,则需要转成行内块级元素
|
---|---|
display: table-cell;vertical-align: middle;text-align:center; | display:inline-block; |
应用二:不等高项水平垂直居中
在应用一的基础上,给
子项(元素)
添加 vertical-align: middle; 就可以实现
应用三:单个块级元素水平垂直居中
给父元素加上如下代码
|
子项为块级元素加上如下代码
|
---|---|
display: table-cell;vertical-align: middle; | margin: 0 auto |
CSS中实现div元素水平垂直居中相关推荐
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素( ...
- css 选父元素,CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- CSS块元素水平垂直居中的实现技巧
针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...
- CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中 很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
- css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法 文本(文字)内容属于行内元素 行内元素水平垂直居中方法 方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
- css实现元素水平垂直居中——6种方式
实现元素水平垂直居中的方式: 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局 利用定位+margin:auto ...
- js、css分别实现元素水平垂直居中
js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...
- html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法 发布时间:2021-06-12 12:44:51 来源:亿速云 阅读:71 作者:小新 这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
- div水平垂直居中 div相对于父元素水平垂直居中 div相对于网页水平垂直居中
div相对于父元素水平垂直居中(相对网页水平垂直居中在下面) 弹性布局 父元素作为容器设置宽高.弹性布局.水平轴和交叉轴居中 display:flex; justify-content:center; ...
最新文章
- 【青少年编程(第31周)】一个有趣又有料的抖音号!
- 网站访问过程理解(一点记录)
- what do we want for advertiesement
- 华为交换机导入配置_华为交换机基础配置1—进入命令行
- 知乎问题:概率图模型是否有必要系统地学习
- namenode启动不了以及datanode启动不了的解决办法
- dp问题 -挑战例题 2017-7-24
- [Oracle]使用非滚动游标
- voip和rtc_为什么开发WebRTC与VoIP开发不一样?(上)
- 【源码阅读】dbutil包中BasicRowProcessor内部类CaseInsensiti...
- 淘宝开放平台正式环境获取数据(一)
- 吃了核辐射食物怎么办_我们经常吃的猪肉,相当一部分是核辐射照过的,会对身体有害吗...
- Django【设计】可插拔的插件方式实现
- 回顾|腾讯AI打败王者荣耀职业队,AI训练一天等于人类440年
- linux内核提高系统实时性,Linux操作系统实时性分析及改进策略
- 360 Pika 主从配置
- centos 6 python django mysql_CentOS 6.5中部署django+uwsgi+nginx+mysql项目
- 人工智能换脸python_AI换脸(手把手教你实现吴彦祖变苏大强)
- 习题6_5 巡逻机器人(Patrol Robot, ACM/ICPC Hanoi 2006, UVa1600)
- calendar java 线程安全_Calendar(线程不安全)
热门文章
- 第十四届蓝桥杯三月真题刷题训练——第 7 天
- 显示ip地址html代码,37行代码实现爬取ip地址并显示到GUI上
- 安装mysql8.0 https://dl.bintray.com/ 网址被禁用问题
- SQL入门之第十讲——INNER JOIN 内连接
- Redis中事务用法详解
- openfeign调用excel导出接口
- Android键盘输入语言设置默认打开myanmar 缅甸语
- 键盘上的整蛊专家,如何防止短信轰炸机
- 这款键盘你真的要考虑一下!——Keychron K3测评
- macos 一些kafka命令整理