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 ...
随机推荐
- k8s中解决容器时差问题
解决k8s的pod容器的时差常用的两种方式: 1.通过设置pod 模板中的环境变量 env解决 在pod的模板中添加以下: apiVersion: v1 kind: Podmetadata: na ...
- dp--P1439 最长公共子序列（LCS）
题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入格式 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出格式 一个数,即最长公共子序列的长度 找出两 ...
- UVA 10534 LCS变种题
求一个序列中 的2*n-1个数字 ,前n+1个数字为严格升序 后n+1个为严格降序,求最长的长度 一开始还没想清楚怎么解,其实就是一个LCS问题,从头到尾以及反序求一下LCS 由于 d[i]为包含了自 ...
- 2019.3.12 linux关于用户的一些命令
su:默认切换到root 创建用户 adduser :新建一个用户 sudo adduser 新用户名字 :创建新用户 sudo passwd 用户名:修改该用户名的密码 创建组 sudo addgr ...
- rabbitmq设置队列消息存活时间
public static final int ALIVETIME = 600000; public static final String QUEUE = "hnyz_gs_queue&q ...
- 吴裕雄--天生自然 PHP开发学习：While 循环
<html> <body> <?php $i=1; while($i<=5) { echo "The number is " . $i . &q ...
- Linux无法连接网络解决方案
上次在VM中装好Linux以后,用xshell可以连接上Linux,可是今天在启动虚拟机打开Linux以后,发现又没有网络连接了,因为要用xshell连接的话首先要知道Linux的ipv4地址,在li ...
- SQL基础教程（第2版）第6章 函数、谓词、CASE表达式：练习题
END) AS low_price, END) AS mid_price, END) AS high_price FROM Product; 6_2.sql
- Okhttp 多次调用同一个方法出现错误java.net.SocketException: Socket closed
Okhttp 多次调用同一个方法出现错误java.net.SocketException: Socket closed https://blog.csdn.net/QQiqq1314/article/ ...
- 【前缀思想】二叉树中所有距离为 K 的结点
863. 二叉树中所有距离为 K 的结点 class Solution { Map<TreeNode,String>map=new HashMap<>(); String pa ...