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 ...
随机推荐
- MySql 的操作指令(window)
1.登录: mysql -uroot -p 2.查看所有数据库: show databases 3.切换数据库 : use databasename(数据库名称) 4.查看数据库的所有表格 ...
- Jackknife，Bootstrap, Bagging, Boosting, AdaBoost, RandomForest 和 Gradient Boosting的区别
Bootstraping: 名字来自成语“pull up by your own bootstraps”,意思是依靠你自己的资源,称为自助法,它是一种有放回的抽样方法,它是非参数统计中一种重要的估计统 ...
- leetcode算法题121-123 --78 --python版本
给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 实例输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 必须在原数组上操作,不能 ...
- Leetcode第1题：两数之和
给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的 两个 整数.你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元素.示例:给定 nums ...
- 指针数组的初始化和遍历,并且通过for循环方式、函数传参方式进行指针数组的遍历
/************************************************************************* > File Name: message.c ...
- Java并发分析—ConcurrentHashMap
LZ在 https://www.cnblogs.com/xyzyj/p/6696545.html 中简单介绍了List和Map中的常用集合,唯独没有CurrentHashMap.原因是CurrentH ...
- Java 进制转换(二进制（负），八进制，十进制，十六进制)，位运算、逻辑运算（2）
负数的二进制表现形式:其实就是该数的绝对值取反+1. 进制转换(二进制,八进制,十进制,十六进制),原理解析 十六进制的表现形式: (2)(与.异或.左移.右移.三元运算符)
- java反射修改静态方法的值setAccessible
这几天闲来无事.在网上看了一个题目,相信大家都知道这个题目 static void change(String str){ str="welcome"; ...
- web项目servlet&jsp包失效问题
今天偶然遇到这样的一个问题,故做个总结. javaee开发只用到serlet和jsp两个包.而sun提供的jdk只是javase部分的包,对于se部分只提供了规范,而包由容器给出. 由于自己在新建好一 ...
- 等和的分隔子集（dp）
晓萌希望将 1 到 N 的连续整数组成的集合划分成两个子集合,且保证每个集合的数字和是相等. 例如,对于 N = 3,对应的集合 1, 2, 3 能被划分成3和1,2两个子集合. 这两个子集合中元素分 ...