1:通过position:absolute定位,上下左右的值都设为0,margin:auto;需要知道div的宽高

{
width: 64px;
height: 64px;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

2:需要知道div的宽高,通过定位移动的页面的宽高一半的位置,再通过margin-top和margin-left的移动该div的宽高度的一般即可实现;

{

width: 64px;
height: 64px;
border: 1px solid red;
background-image: url(img/g2.gif);
background-size:100% 100% ;
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -32px;

}

3 未知div的宽高。由div的内容撑起来

{

border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

}

关于一个div上下左右居中的css方法的更多相关文章

  1. 9.如何让一个div 上下左右居中?【CS

      方法1:[绝对定位50%-本身50%]              position:absolute; left:50%; top:50%;              transform: tra ...

  2. css:子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  3. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class= ...

  4. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  5. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  6. div上下左右居中方法

    方法一:在浏览器中只有一个div的情况 { position:fixed; position:fixed; ; ; ; ; margin:auto; } 方法一 方法二:一个父元素div和一个已知宽度 ...

  7. div上下左右居中几种方式

    1.绝对定位(常用于登录模块)备注:前提条件div需要有宽高 #html <div class="box"></div> #css .box{ positi ...

  8. 单个div充满屏幕的CSS方法

    1.通过定位实现 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow ...

  9. DIV 上下左右居中黑科技

    <style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:# ...

随机推荐

  1. http://ctf.bugku.com/challenges#Mountain%20climbing:bugku--Mountain-Climbing

      分析这道题,爽,能够结合IDA和ollydbg分析代码,美滋滋.但如果以后能直接根据汇编容易地看懂逻辑那就更好了. 参考链接: https://blog.csdn.net/cossack9989/ ...

  2. 微信小程序记账本进度一

    一,1.注册微信公众号 2.点击“立即注册”后,点击“”小程序“” 3.填写邮箱等信息.完成并激活.

  3. SQL Server 2008 R2 根据WSDL访问WebService

    参考网站:WebService学习整理(一)——客户端三种调用方式整理 自我概括: WebService 通过HTTP通讯,数据以XML格式传输使两个系统进行数据交互 SOAP 是访问协议(注明访问W ...

  4. PHPNow升级PHP版本

    PHPNow升级PHP版本 phpnow下载地址:http://www.jb51.net/softs/12868.html 1,先把PHP5.3.5下载下来,在官网我是没找到VC6的版本,只能从Goo ...

  5. WPF图片拖拉变形、合成

    使用WPF的装饰器(Adorner)实现图片拖拉变形,DrawingVisual高保真合成图片.效果如下: 源码:https://gitee.com/orchis/ImageFotoMix.git

  6. 使用fabric2打包部署文件

    一直以来都是复制粘贴或者拖动文件完成部署,实在是低效得很!学了学fabric,写个了脚本.如下: from fabric import Connection import shutil HOST = ...

  7. 【Mybatis】MyBatis对表执行CRUD操作(三)

    本例在[Mybatis]MyBatis配置文件的使用(二)基础上继续学习对表执行CRUD操作 使用MyBatis对表执行CRUD操作 1.定义sql映射xml文件(EmployeeMapper.xml ...

  8. poj3304(是否存在一条直线与所有给出线段相交

    题意:给出n条线段,问你是否存在一条直线让他与所有线段相交. 思路:枚举两条直线的起点和终点做一条直线,看他是否与所有线段相交. #include<cstdio> #include< ...

  9. python 实践项目 强密码检测

    需求:写一个函数,它使用正则表达式,确保传入的口令字符串是强口令.强口令的定义是:长度不少于 8 个字符,同时包含大写和小写字符,至少有一位数字.你可能需要用多个正则表达式来测试该字符串,以保证它的强 ...

  10. 题解 luogu P1144 【最短路计数】

    本蒟蒻也来发一次题解第一篇请见谅 这个题有几个要点 1.无向无权图,建图的时候别忘记建来回的有向边[因此WA掉1次 2.无权嘛,那么边长建成1就好了2333333 3.最短路采用迪杰斯特拉(别忘用堆优 ...