div css水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
padding: 0;
margin: 0;
}
/*垂直居中*/
.box {
width: 1200px; /*图片宽*/
height: 650px; /*图片高*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -600px;/* 宽/2 */
margin-top: -325px; /* 高/2 */
}
</style>
</head>
<body>
<div class="box">
<img src="img/luomu_02_02.png" />
</div>
</body>
</html>
@落雨
http://ae6623.cn
效果:
div css水平垂直居中的更多相关文章
- css的div动态水平垂直居中
div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- CSS：div/img水平垂直居中
div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
随机推荐
- 数据预处理：标准化（Standardization）
注:本文是人工智能研究网的学习笔记 常用的数据预处理方式 Standardization, or mean removal and variance scaling Normalization: sc ...
- 汉化 的 空指针 bug
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha nulljava.lang.NullPointerException at com.an ...
- css选择器（第n个类选择器）的坑
css选择器选择第n个子元素,共有两种写法: .parent span:nth-child(n) 选择parent下的第n个子元素(不管前边是不是span,都算在内) .parent span:nth ...
- BZOJ.2339.[HNOI2011]卡农(思路 DP 组合 容斥)
题目链接 \(Description\) 有\(n\)个数,用其中的某些数构成集合,求构造出\(m\)个互不相同且非空的集合(\(m\)个集合无序),并满足每个数总共出现的次数为偶数的方案数. \(S ...
- 【数论】【扩展欧几里得】Codeforces Round #484 (Div. 2) E. Billiard
题意:给你一个台球桌面,一个台球的初始位置和初始速度方向(只可能平行坐标轴或者与坐标轴成45度角),问你能否滚进桌子四个角落的洞里,如果能,滚进的是哪个洞. 如果速度方向平行坐标轴,只需分类讨论,看它 ...
- HTTP首部字段
HTTP首部由首部字段名和首部字段值组成,以逗号隔开.如果首部出现重复,有些浏览器优先处理第一个出现的首部,有些优先处理后者. 主要分为四大类 通用首部字段 请求首部字段 响应首部字段 实体首部字段 ...
- Xcode更新后插件失效解决办法
defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityUUID 获取新版xcode的uuid Xcode6 ...
- gulp编译出现Cannot find module 'internal/util/types'——node环境的变更
一心埋头敲代码,再回首,nodejs都蹦跶到8.9版本了,为了跟上时代,妥妥的赶紧升级啊,升级的结果...Cannot find module 'internal/util/types'... 于 ...
- Oracle sql语句中(+)作用
select * from operator_info o, group_info g where o.group_id = g.group_id(+); 理解: + 表示补充,即哪个表有加号 ...
- Maven项目META-INF文件夹不存在的问题
直接在resources文件夹下新建META-INF文件夹即可. 参考: https://my.oschina.net/KingPan/blog/750159 https://stackoverflo ...