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. sed原理及使用

    前言 环境:centos6.5 sed版本:GNU sed version 4.2.1 本文的代码都是在这个环境下验证的. 一.简介 sed(Stream Editor)意为流编辑器,是Unix常见的 ...

  2. [leetcode]32. Longest Valid Parentheses最长合法括号子串

    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...

  3. flex布局实现elment容器布局

    一.flex布局是什么 flex布局,意为"弹性布局",是一种响应式的布局方法 采用 Flex 布局的元素,称为 Flex 容器,它的所有子元素自动成为容器成员. 先放上一个ele ...

  4. oracle 中的sql 语句

    1.update 表名 set 表字段=(select 另一个表中的相同字段 from 另一个表表名 where 表.字段=另一个表.字段) where  表.字段=? 例子:将某个表中的更新到另一个 ...

  5. 万能的一句话 json

    String str1 = new JavaScriptSerializer().Serialize(meetapply1);//meetapply1==object T

  6. java多线程系列7 高级同步工具(1)信号量Semaphore

    Semaphore叫做信号量 可以控制某个资源可被同时访问的个数, acquire() 获取一个许可,得到许可才能执行后面的代码,如果没有就等待. release() 释放一个许可. 当信号量的只允许 ...

  7. Squid.conf配置详情

    squid常用命令:/usr/local/squid/sbin/squid -z 初始化缓存空间/usr/local/squid/sbin/squid 启动/usr/local/squid/sbin/ ...

  8. memmove、memcpy和memccpy简介

    memmove.memcpy和memccpy三个函数都是内存的拷贝,从一个缓冲区拷贝到另一个缓冲区.memmove(void *dest,void*src,int count)memcpy(void ...

  9. 2019.03.01 bzoj2555: SubString(sam+lct)

    传送门 题意简述: 要求在线支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 思路: 考虑用lctlctlct来动态维护samsa ...

  10. ABP框架系列之五十二:(Validating-Data-Transfer-Objects-验证数据传输对象)

    Introduction to validation Inputs of an application should be validated first. This input can be sen ...