关于一个div上下左右居中的css方法

时间:2021-08-10 06:19:37

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上下左右居中

    链接.father { width: 300px; height:150px; position: relative; } .son { position: absolute; top: 0; rig ...

随机推荐

  1. 第1章 &lpar;ASP&period;NET MVC简介&rpar;

    一.MVC概念 MVC由三部分组成:视图(View).模型(Model).控制器(Controller)组成 二.运用VS创建MVC 1.新建一个"解决方案" 2.在"解 ...

  2. Effective C&plus;&plus; -----条款08&colon; 别让异常逃离析构函数

    析构函数绝对不要吐出异常.如果一个被析构函数调用的函数可能抛出异常,析构函数应该捕捉任何异常,然后吞下它们(不传播)或结束程序. 如果客户需要对某个操作函数运行期间抛出的异常作出反应,那么class应 ...

  3. cocos2dx 动画显示异常

    最近遇到一个问题 好多cocostudio导出的动画 显示都会有异常 很明显的融合方式 把混合方式里面的 src 改成one dst 改成 one-src alpha 解决 后面附上同行的文章 浅显易 ...

  4. lua环境安装 转

    curl -R -O http://www.lua.org/ftp/lua-5.2.2.tar.gz tar zxf lua-5.2.2.tar.gz cd lua-5.2.2 make linux ...

  5. Fedora 防火墙关闭与开启

    重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off   或者 /sbin/chkconfig --level 2345 iptable ...

  6. 打造属于前端的Uri解析器

    今天和大家一起讨论一下如何打造一个属于前端的url参数解析器.如果你是一个Web开发工程师,如果你了解过后端开发语言,譬如:PHP,Java等,那么你对下面的代码应该不会陌生: $kw = $_GET ...

  7. liunx 内存文件 tmpfs

    tmpfs是Linux/Unix系统上的一种基于内存的文件系统.tmpfs可以使用您的内存或swap分区来存储文件 1 创建将被挂载的文件 mkdir /tmp/tmpfs/ 2 写入测试文件内容.大 ...

  8. 使用maven开发过程中,pom报的一些错的解决方法

    1.  maven-resources-plugin prior to 2.4 is not supported by m2e. Use maven-  resources-plugin versio ...

  9. 20160218&period;CCPP体系详解&lpar;0028天&rpar;

    程序片段(01):加法.c 内容概要:字符串计算表达式 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <st ...

  10. arcgis api 3&period;x for js 入门开发系列十三地图最短路径分析(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...