Div实现水平垂直居中
在实际应用中很多地方不仅要求实现元素的水平居中或者垂直居中效果，还可能会在水平方向和垂直方向上都要实现居中效果，下面就简单介绍几种元素水平垂直居中的方法（注：不同的方法会存在一些优缺点以及兼容性问题）
hmtl结构：
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
- 定位 + 负外边距
.parent{
position: relative;
width: 200px;
height: 200px;
background-color: blue;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
background-color: #fff;
}
原理：元素设置定位并给定 50% 的top值和left值，再通过 负margin 将元素向左上移动自身宽高的一半（margin-top:-height/2; margin-left:-width/2），该方法前提是要知道元素的宽高
- 定位 + 平移
.parent{
position: relative;
width: 200px;
height: 200px;
background-color: green;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 50px;
height: 50px;
background-color: #fff;
}
原理：和上面方法类似，不同的是使用CSS3新增属性 transform 中的 translate 平移属性代替 margin属性，这样就是根据自身尺寸进行移动，缺点是由于为新增属性，兼容性自然就不是很好，远古IE不支持。
- 强大的 “margin:auto”
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: deeppink;
}
.child {
position: absolute;
top: 0;
bottom:0;
left: 0;
right: 0;
width: 50px;
height: 50px;
margin: auto;
background-color: #fff;
}
原理：该方法的关键点是：1.绝对定位的（top、right、bottom、left）四个属性均要设置值为0；2.margin:auto，能够适用单个元素或者父子级元素，设置绝对定位并添加 margin:auto 属性就能够实现水平垂直居中，元素可自定义宽高，也可不设置（需要是自身存在尺寸的元素：img等），具体 绝对定位+margin:auto 的实现原理参考https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
- flex布局
div.parent{
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: red;
}
div.child{
width: 50px;
height: 50px;
background-color: lime;
}
//或者
div.parent{
display: flex;
width: 200px;
height: 200px;
background-color: red;
}
div.child{
width: 50px;
height: 50px;
margin:auto;
background-color: lime;
原理：通过给父元素设置display为flex，再设置 item 的主轴和辅轴的对齐方式，兼容性也不是很好（IE8+ 及大众浏览器），大多数用于移动端布局
- grid布局
.parent{
display: grid;
width: 200px;
height: 200px;
background-color:deepskyblue;
}
.child{
justify-self: center;
align-self: center;
width: 50px;
height: 50px;
background-color: #fff;
}
原理：和flex布局实现思路类似。
- 表格布局
.parent {
display: table-cell;
height: 200px;
width: 200px;
background-color: orange;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
以上内容参考自其它文章并结合自身理解，若存在错误请指出，谢谢！！！
Div实现水平垂直居中的更多相关文章
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...
- css的div动态水平垂直居中
div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...
- div盒子水平垂直居中的方法
这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...
- 总结div里面水平垂直居中的实现方法
最近经常碰到要垂直居中的问题,所以想着总结一下:关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: < ...
- CSS：div/img水平垂直居中
div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- div 内容水平垂直居中
对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id ...
- 关于div的水平垂直居中
水平垂直居中 一.未知宽高 1. table布局(display:table) 2. 转化为行内标签display:inline-block,借助另外一个标签高度来实现 3. 绝对布局(positio ...
随机推荐
- Java同步数据结构之Map概述及ConcurrentSkipListMap原理
引言 前面介绍了CopyOnWriteArraySet,本来接着是打算介绍ConcurrentSkipListSet,无耐ConcurrentSkipListSet的内部实现其实是依赖一个Concur ...
- MySQL 临时表和复制表
MySQL 临时表在我们需要保存一些临时数据时是非常有用的.临时表只在当前连接可见,当关闭连接时,Mysql会自动删除表并释放所有空间. 临时表在MySQL 3.23版本中添加,如果你的MySQL版本 ...
- C#与C++数据类型比较及结构体转换(搜集整理二)
原文网址:http://www.blogjava.net/heting/archive/2010/03/20/315998.html C++ C# ========================== ...
- code review 20190705
命名规范: 做了什么? 目的是什么? 在什么基础上进行? 注释说明 sql update,where 先行????? 警告: 清空所有警告:所有隐藏比较深入的bug,都是由警告带来的 + 忽略警告 枚 ...
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_02-自定义查询页面-服务端-接口开发
在Service中实现自定义查询 StringUtils.isNotEmpty()是这个包下的org.apache.commons.lang3.StringUtils; 再设置其他的条件 定义Exam ...
- 加载selenium库
一.maven的下载.解压以及环境变量配置 1.下载maven: 官网下载地址:http://maven.apache.org/download.cgi 在Files下面下载对应的maven版本(官网 ...
- Python3 Selenium自动化web测试 ==> 第十节 WebDriver高级应用 -- xpath语法
学习目的: xpath定位是针对常规定位方法中,最有效的定位方式. 场景: 页面元素的定位. 正式步骤: step1:常规属性 示例UI 示例UI相关HTML代码 相关代码示例: #通过id定位 dr ...
- 当微信小程序遇到AR（二）
当微信小程序遇到AR,会擦出怎么样的火花?期待与激动...... 通过该教程,可以从基础开始打造一个微信小程序的AR框架,所有代码开源,提供大家学习. 本课程需要一定的基础:微信开发者工具,JavaS ...
- jackson 实体转json 为NULL或者为空不参加序列化【转载】
原博客:https://www.cnblogs.com/yangy608/p/3936848.html 1.实体上 /** * 将该标记放在属性上,如果该属性为NULL则不参与序列化 * 如果放在类上 ...
- ahk实现git图床自动预览以及转换markdown格式
ahk实现git图床自动预览以及转换markdown格式 软件地址 https://gitee.com/layty/pic/tree/master/app 软件功能: 检测剪切板,如果剪切板有非文本信 ...