关于百分比宽高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"> <! ...
随机推荐
- jq 替换DOM layeui 不刷新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js取最值：
取最值是很常见的一种运算,各个语言都会遇到这个问题.Js中,如果简单的进行取最值,完全没必要自己写一个比较函数,原生的js就提供了方法.这些方法都属于Math 对象(引用w3c:Math 对象并不像 ...
- AD 域服务简介（一）- 基于 LDAP 的 AD 域服务器搭建及其使用（转）
一.前言 1.1 AD 域服务 什么是目录(directory)呢? 日常生活中使用的电话薄内记录着亲朋好友的姓名.电话与地址等数据,它就是 telephone directory(电话目录):计算机 ...
- lua_自己对“lua函数”知识点的总结
lua_自己对“lua函数”知识点的总结 1.lua函数的定义 --lua中,函数都是function类型的对象.(1)其可以被比较 (2)其可以赋值给一个对象(3)可以传递给函数(4)可以从函数中返 ...
- C# 常用语句
var list = dt.AsEnumerable().Select(t => t.Field<string>("Bed")).ToList();Select( ...
- tesuto-Mobius
求 \begin{equation*}\sum_{i=1}^n\sum_{j=1}^m[\gcd(i,j)=k]\end{equation*} 的值. 莫比乌斯反演吧. \begin{align*}& ...
- nyoj23-取石子（一）
取石子(一) 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 一天,TT在寝室闲着无聊,和同寝的人玩起了取石子游戏,而由于条件有限,他/她们是用旺仔小馒头当作石子.游戏的 ...
- Vue CLI 3 中文文档
翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...
- NLTK学习笔记(五):分类和标注词汇
目录 词性标注器 标注语料库 表示已经标注的标识符:nltk.tag.str2tuple('word/类型') 读取已经标注的语料库 名词.动词.形容词等 尝试找出每个名词类型中最频繁的名词 探索已经 ...
- delphi主i窗口中实现多页面管理效果
MainForm上加Panel,把Panel的DockSite设为True, 把窗口FB_orderManage的DragKind设为dkDock, DragMode设为dmAuromatic 在M ...