div+css居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<style type="text/css">
html,body{
width:100%;
height:100%;
position: relative;
background-color: #7a43b6;
}
.container {
width:85%;
height: 85%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #00b3ee;
}
.content{
width:85%;
height:85%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
</html>
复制直接运行即可
div+css居中的更多相关文章
- 各种div+css居中方式调整（转载）
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- div css 伪类 不固定图片大小 居中， css div 实现三角形
div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...
- DIV+CSS 图文混排的图片居中办法
不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...
- css 如何使图片与文字在div中居中展示？
1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
随机推荐
- Mysql5.7免编译版自动安装脚本
一:readme: .此脚本仅仅适合于5.7免面编译安装版本. .安装是需自己选择mysql软件安装包:例如mysql--linux-glibc2.-x86_64.-linux-glibc2.-x86 ...
- cocos-js一些问题
1. setTexture和setSpriteFrame方法 修改精灵的里面的图片的时候如果是图片使用 var imgPath = "#" + this.imgName[idx] ...
- springmvc当要返回中文字符串时出现乱码
当过滤器,页面编码都对,tomcat版本在8以上(8内部默认用utf-8) 在方法参数中加上,produces="text/html;charset=UTF-8" 绝对可以解决!! ...
- nodejs 不是单线程
nodejs 不是单线程 在我机器上,nodejs 起了近 20 个线程. 对,你没有看错,20个线程.
- vue2.0：（三）、项目开始，首页入门（main.js，App.vue,importfrom）
接下来,就需要对main.js App.vue 等进行操作了. 但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import fro ...
- [Luogu1343]地震逃生 最大流
题目链接:https://www.luogu.org/problem/show?pid=1343 dinic跑最大流. #include<cstdio> #include<cstri ...
- 前端上传插件Plupload的实际使用（个人实操）
一个主要的页面,其中包裹了一个iframe页面,在项目中,这个iframe页面包裹在主页面的div标签中,主要用于上传文件附件. 用的是plupload.full插件,主要引入以下几个js: jque ...
- 洛谷 First Step (ファーストステップ) 3月月赛T1
题目背景 知らないことばかりなにもかもが(どうしたらいいの?) 一切的一切 尽是充满了未知数(该如何是好) それでも期待で足が軽いよ(ジャンプだ!) 但我仍因满怀期待而步伐轻盈(起跳吧!) 温度差なん ...
- rhythmbox插件开发笔记2：背景知识学习 D-Bus&VFS&Gio& Python GTK+ 3
这次主要简单介绍下相关的背景知识 D-Bus&VFS&Gio& Python GTK+ 3 D-Bus D-Bus是开源的进程通信(IPC)系统,它允许多个进程进行实时通信. ...
- bxslider 使用帮助
“bxSlider”就是一款响应式的幻灯片js插件 bxSlider特性 充分响应各种设备,适应各种屏幕: 支持多种滑动模式,水平.垂直以及淡入淡出效果: 支持图片.视频以及任意html内容: 支持触 ...