关于百分比宽高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"> <! ...
随机推荐
- PS学习列表
1 去水印 祛痘 祛斑 2 新建画布,素材拖到ps中,图层 3 钢笔抠图,直线点,圆弧拖,遇到拐角按alt,ctrl+回车键将扣的图变为选区,ctrl+j复制一层上来 4 证件照换底
- socket主要函数介绍
1. 基本套接字函数(1)socket函数原型 socket(建立一个socket文件描述符) 所需头文件 #include <sys/types.h> #include <sy ...
- 使用JAVA写一个简单的日历
JAVA写一个简单的日历import java.text.DateFormat;import java.text.ParseException;import java.text.SimpleDateF ...
- lucene7.1.0实现搜索文件内容
Lucene的使用主要体现在两个步骤: 1 创建索引,通过IndexWriter对不同的文件进行索引的创建,并将其保存在索引相关文件存储的位置中. 2 通过索引查寻关键字相关文档. 首先,我们需要定义 ...
- python-selenium，关于页面滑动
第一种: #滑到底部 js="var q=document.documentElement.scrollTop=100000" driver.execut_script(js) 目 ...
- windows开机自启动bat脚本设置
群里有朋友问到windows下如何设计开机自启动的脚本,一般而言小鱼大多还是在linux环境下运维,windows的bat了解的很少,windows运行机制也不是特别了解,不过既然朋友问到这个问题,虽 ...
- [Ynoi2016]掉进兔子洞 题解
题面传送门:https://www.luogu.org/problemnew/show/P4688 (温馨提示,请直接翻至题目描述部分) 1e5的数据范围,以及对区间每个权值出现次数取min此类主席树 ...
- Parsing error: The keyword 'export' is reserved && error Parsing error: Unexpected token <
如果你也在使用eslint,也报了如上错误,可以尝试: $ npm install babel-eslint --save-dev 然后,加上: rules: { "parser" ...
- Git 基础教程 之 添加、提交
一, 编写一个名为readme.txt文件,放入pythonwork目录下 ① 手动新建 ② 使用命令: a. touch readme.txt b. vim readme.txt PS: ...
- 一次完整的http事务
一次完整的http事务 https://www.processon.com/view/link/56c6679ce4b0f0c4285e69c0 规范把 HTTP 请求分为三个部分:状态行.请求头.消 ...