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 ...
随机推荐
- LC 984. String Without AAA or BBB
Given two integers A and B, return any string S such that: S has length A + B and contains exactly A ...
- python中的tcp示例详解
python中的tcp示例详解 目录 TCP简介 TCP介绍 TCP特点 TCP与UDP的不同点 udp通信模型 tcp客户端 tcp服务器 tcp注意点 TCP简介 TCP介绍 TCP协议 ...
- php操作成功返回当前页并刷新
echo "<script>alert('操作成功');location.href='".$_SERVER["HTTP_REFERER"].&quo ...
- 关于对VGA、DVI、HDMI的区别
VGA接口: DVI接口: HDMI接口 可以这么理解: 1. VGA传输普通视频信号,DVI传输高清视频信号,HDMI传输高清视频信号并支持音频传输.2. HDMI的三种接口只有大小区别,功能没有任 ...
- LeetCode_9. Palindrome Number
9. Palindrome Number Easy Determine whether an integer is a palindrome. An integer is a palindrome w ...
- 安装完 MySQL 后必须调整的 10 项配置(转)
当我们被人雇来监测MySQL性能时,人们希望我们能够检视一下MySQL配置然后给出一些提高建议.许多人在事后都非常惊讶,因为我们建议他们仅仅改动几个设置,即使是这里有好几百个配置项.这篇文章的目的在于 ...
- gitlab安装、下载、推送 代码（推荐）
环境: 内存必须5G以上 centos7.5 服务端:192.168.0.74 客户端:192.168.0.73 GitLab的安装 1.在CentOS系统上,下面的命令将会打开系统防火墙HTTP和S ...
- SSD总结
SSD: Single Shot MultiBox Detector 1. Introduction 改进点: 以前的方法都是先搞bounding box,再对box里面做分类.特点:精度高,速度慢. ...
- LomBok插件--模型类注解
Data注解,ToString注解都是Lombok提供的注解. Lombok是一个实用的java工具,使用它可以消除java代码的臃肿,Lombok提供一系列的注解,使用这些注解可 以不用定义gett ...
- IDEA配置编码