关于一个div上下左右居中的css方法
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方法的更多相关文章
- 9.如何让一个div 上下左右居中?【CS
方法1:[绝对定位50%-本身50%] position:absolute; left:50%; top:50%; transform: tra ...
- css:子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...
- css div上下左右居中
相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设 content 要在f里上下左右居中 <div class= ...
- 一个div在另一个div中水平垂直的方法
html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- div上下左右居中方法
方法一:在浏览器中只有一个div的情况 { position:fixed; position:fixed; ; ; ; ; margin:auto; } 方法一 方法二:一个父元素div和一个已知宽度 ...
- div上下左右居中几种方式
1.绝对定位(常用于登录模块)备注:前提条件div需要有宽高 #html <div class="box"></div> #css .box{ positi ...
- 单个div充满屏幕的CSS方法
1.通过定位实现 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow ...
- DIV 上下左右居中黑科技
<style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:# ...
随机推荐
- php-beanstalkd消息队列类分享
<?php namespace Common\Business; /** * beanstalk: A minimalistic PHP beanstalk client. * * Copyri ...
- 为了应对异常情况,提供最原始的python第三方库的安装方法:手动安装。往往是Windows用户需要用到这种方法。
进入pypi.python.org,搜索你要安装的库的名字,这时候有3中可能: 第一种是exe文件,这种最方便,下载满足你的电脑系统和python环境的对应的exe,再一路点击next就可以安装. 第 ...
- mybatis进阶-5resultMap总结
resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...
- PHP 获取周,月列表
PHP的date函数以及strtotime函数是很强大的.基本上围绕这2个函数就能处理绝大多数日常开发中日期的处理. 假设有一个需求是按周,月获取最近7周和最近7月的查询.那么我们肯定要划分出时间区间 ...
- [模板]LCA
洛谷P3379 注意:不能与LCA搞混(打久了就会发现两个还是有很大区别的) 位运算一定要加括号! for循环从0到logn还是从logn到0看当前的状态更适合哪种 第53行预处理一定要注意!(因为没 ...
- Spring 框架下 事务的配置(复杂)
//db.properties配置 src下的文件 jdbc.jdbcUrl=jdbc:mysql:///day43jdbc.driverClass=com.mysql.jdbc.Driverjdb ...
- POJ1862 Stripies 贪心 B
POJ 1862 Stripies https://vjudge.net/problem/POJ-1862 题目: Our chemical biologists have invented ...
- Java面试题3
1.servlet执行流程 客户端发出http请求,web服务器将请求转发到servlet容器,servlet容器解析url并根据web.xml找到相对应的servlet,并将request.resp ...
- verilog 有符号数(2转)
在数字电路中,出于应用的需要,我们可以使用无符号数,即包括0及整数的集合:也可以使用有符号数,即包括0和正负数的集合.在更加复杂的系统中,也许这两种类型的数,我们都会用到. 有符号数通常以2的补码形式 ...
- Oracle存储过程,游标使用
Oracle存储过程: 语法: CREATE [OR REPLACE] PROCEDURE procedure_name (arg1 [mode1] datatype1,arg2 [mode2] da ...