Div水平垂直居中的三种方法
百度了很多种方法，很多是不起作用的。下面这些方法是我亲自试过的。希望对大家有帮助！
下面是一波代码水军。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置div水平垂直居中</title>
<style>
*{
margin: 0px;
padding: 0px;
}
/*方法一*/
#cell {
display: table-cell;
vertical-align: middle;
height: 400px;
width: 400px;
background: lightcoral; }
.content{
margin: 0 auto;
height: 200px;
width: 200px;
background: lightgreen;
}
/*方法二*/
.outer{
position: relative;
width: 500px;
height: 400px;
background: coral;
}
.inner{
position: absolute;
top:50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background: yellowgreen;
}
/*方法三*/
.middle-panel{
height:100px;
width:200px;
background: peru;
}
.parent-panel{
width: 400px;
height:300px;
background: paleturquoise; /**主要代码：
display: flex是前提
align-items设置垂直居中；
justify-content设置水平居中*/
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<!--方法一-->
<div id="cell">
<div class="content">Content goes here</div>
</div>
<!--方法二-->
<div class="outer">
<div class="inner"></div>
</div>
<!--方法三-->
<div class="parent-panel">
<div class="middle-panel">
</div>
</div>
</body>
</html>
Div水平垂直居中的三种方法的更多相关文章
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 如何将一个div水平垂直居中？6种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 让div水平垂直居中的几种方法
最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...
- 未知宽高div水平垂直居中的3种方法
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 关于div水平垂直居中的几种方法
Dom结构: <div class="box"> <div class="inner"> 123 </div> </d ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）
flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
随机推荐
- Angular表单 （一）表单简介
Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...
- Microsoft SQL Server Management Studio连接后报“ viewInfo (Microsoft.SqlServer.Management.SqlStudio.Expl”
解决办法: 在路径:C:\Users\你的用户名\AppData\Local\Temp\”新建文件夹并命名为2,如果已经有 2 则看清楚是否是文件而不是文件夹,删掉文件改为文件夹: 如果是找不到\Us ...
- PAT Advanced 1053 Path of Equal Weight (30) [树的遍历]
题目 Given a non-empty tree with root R, and with weight Wi assigned to each tree node Ti. The weight ...
- 寒假day11
毕设数据抽取部分还有一点问题,正在修改中
- Linux&Win双系统下时间显示不正常的问题
于近期开始研究Linux,目前用的是ubuntu.本想着用Linux搞事情,没想到却被Linux搞了. 我安装的是双系统,Linux&windows的组合.相信刚开始用双系统的小伙伴们一定会碰 ...
- Kali桥接模式下配置动态ip
以管理员身份运行虚拟机 打开 控制面板-->网络和Internet-->更改适配器 在虚拟机处桥接到这个WLAN2 点击 编辑-->编辑虚拟网卡 没有网卡就点上图的添加网络作为桥接网 ...
- 28. docker swarm 容器编排简介
1.采用集群架构 集群架构包含节点和角色 docker 节点中 包含 worker 和 manager 两个角色 manager 相当于 swarm 集群的 大脑 是用来管理配置节点的 (避免单点故 ...
- 为什么在SSM中的dao层不用写@Repository注解
1. Mybatis 接口编程中dao 层接口没有注解和 为什么能被实例化为bean? 在Spring配置Mybatis的文件中我们可以看到如下代码: <bean class="or ...
- 01 语言基础+高级：1-2 面向对象和封装_day06【类与对象、封装、构造方法】
day06[类与对象.封装.构造方法] 面向对象类与对象三大特征——封装构造方法 能够理解面向对象的思想能够明确类与对象关系能够掌握类的定义格式能够掌握创建对象格式,并访问类中的成员能够完成手机类的练 ...
- UML-领域模型-添加关联和属性
1.何谓关联? 关联(association):一个类的全局变量引用了另一个类,就表示关联了这个类 2.何时使用关联? 长时间(需要记住)留存的需要关联:短时间的不需要.比如: 需要关联:老师教那些课 ...