关于百分比宽高div居中并垂直居中问题
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>关于div居中</title>
</head>
<style type="text/css">
html,
body {
height: 100%;
} .div1 {
width: 60%;
height: 40%;
border: 1px solid #000000;
} .div2 {
width: 40%;
height: 45%;
background-color: green;
}
</style> <body>
<div class="div1">
<div class="div2"> </div>
</div>
</body> </html>
一、绝对定位
.div1 {
position: relative;
}
.div2 {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
二、translate
.div2 {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
三、flex
.div1 {
}
关于百分比宽高div居中并垂直居中问题的更多相关文章
- CSS Transform让百分比宽高布局元素水平垂直居中
很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...
- css固定宽高DIV内部元素垂直居中的方法
应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...
- absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- 007. 自定义ListBox的item的宽高, 字体居中
/// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- table-cell设置宽高、居中
table-cell默认宽高由内容决定 <style type="text/css" rel="stylesheet"> .content { co ...
- div居中和垂直居中的最简单方法
div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...
- 鼠标hover某个元素时其属性表现Css transition 过渡效果（以宽高属性居中放大为例）
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
随机推荐
- SQLite 的使用
private void button1_Click(object sender, EventArgs e) { //查询数据库内容并绑定 string sql= "select* from ...
- vue系列---identify(生成图片验证码)插件
identify 这是一个vue的插件,使用canvas来生成图形验证码. 具体参数如下: identify.vue组件(主要用于定义参数和方法) <template> <div c ...
- 【Android】进程间通信IPC——AIDL
AIDL官网定义AIDL(Android 接口定义语言)与您可能使用过的其他 IDL 类似. 您可以利用它定义客户端与服务使用进程间通信 (IPC) 进行相互通信时都认可的编程接口. 在 Androi ...
- lua_自己对“lua函数”知识点的总结
lua_自己对“lua函数”知识点的总结 1.lua函数的定义 --lua中,函数都是function类型的对象.(1)其可以被比较 (2)其可以赋值给一个对象(3)可以传递给函数(4)可以从函数中返 ...
- swift UITableViewCell 中的单选控制样式
我昨天在网上找了一晚上的资料,但是大多都是OC得语法,swift资料实在是太少了,使得我这个刚入门swift的彩笔好不吃力,后面一直各种翻阅资料,终于让我找到了 visibleCells 这个方法,直 ...
- 【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题（Ajax跨域）
问题引出:要发送Ajax请求,就必须使用HTTP请求?什么是跨域问题? 什么是跨域问题:如果两个页面中的协议.域名.端口.子域名任意有一项不同,两者之间所进行的访问行动就是跨域的,而浏览器为了安全问题 ...
- Qt Quick编程(1)
说道QML,不得不先说一下ECMAScript: ECMAScript语言的标准是由Netscape.Sun.微软.Borland等公司基于JavaScript和JScript锤炼.定义出来的. EC ...
- windows 下关于nginx的操作
在nginx安装目录下操作 1.启动:start nginx 2.停止:① nginx.exe -s stop ②nginx.exe -s quit 注:stop是快速停止nginx,可能并不保存 ...
- 转载 - Catalan数(卡特兰数)
出处:http://blog.sina.com.cn/s/blog_6aefe4250101asv5.html 什么是Catalan数 说到Catalan数,就不得不提及Catalan序列,Catal ...
- JAVA数据库连接的另一种实现及简单的数据插入及显示
教材是JDK8的,家里也可以正规的测试JDK8, 但公司电脑是JDK6的,所以代码要相应的变动一下下,以适应老的TRY语句. Message.java package cc.openhome; imp ...