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 ...
随机推荐
- start开启服务的生命周期
* 完整生命周期:onCreate()-->onStartCommand()-->onDestroy() * 开启服务:onCreate()-->onStartCommand() * ...
- kafka-sparkstreaming---学习1
---恢复内容开始--- import java.util.*; import org.apache.spark.SparkConf; import org.apache.spark.TaskCont ...
- save()和savaorupdate的区别
hibernate的保存 hibernate对于对象的保存提供了太多的方法,他们之间有很多不同,在这里细说一下,以便区别: 一.预备知识: 在所有之前,说明一下,对于hibernate,它的对 ...
- 强化学习——Q-learning算法
假设有这样的房间 如果将房间表示成点,然后用房间之间的连通关系表示成线,如下图所示: 这就是房间对应的图.我们首先将agent(机器人)处于任何一个位置,让他自己走动,直到走到5房 ...
- intel 酷睿core系列cpu的类型：U M H HQ MQ
相对于笔记本来说.一般我们说的intel系列cpu是指应用于desktop桌面版,embedded嵌入式版, mobile移动版 桌面版和移动版cpu对比 http://tieba.baidu.com ...
- HANA到MySQL数据同步方法!
随着各行各业信息化建设的不断发展,异构数据库间的互通.汇聚,挖掘,分析逐渐被提上日程, TreeSoft数据库管理系统,实现了异构数据库的维护.监控.可视化.自动交换同步.目前支持MySQL,Orac ...
- VAO和VBO
我想大家都已经熟悉VBO了吧.在GL3.0时代的VBO大体还是处于最重要的地位,但是与此同时也出现了不少新的用法和辅助役,其中一个就是VAO.本文大致小记一下这两者的联系,帮助大家理解一下这个角色.— ...
- souce and bash 的区别
对于一些环境变量的配置文件,如想使更改后立即生效,多用 souce +file 执行后即可.如/etc/profile 里加了配置, source 和 bash 的区别: source filena ...
- 安卓运行linux应用程序
安卓是可以运行linux应用程序的,安卓系统原来就基于Linux.但是安卓已经把linux改头换面了.具体方法是安装Termux软件,然后就可以运行pkg命令安装软件包了,希望可以帮助到大家.
- 基于Keras 的VGG16神经网络模型的Mnist数据集识别并使用GPU加速
这段话放在前面:之前一种用的Pytorch,用着还挺爽,感觉挺方便的,但是在最近文献的时候,很多实验都是基于Google 的Keras的,所以抽空学了下Keras,学了之后才发现Keras相比Pyto ...