关于一个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:# ...
随机推荐
- elasticsearch 动态增加副本
动态调整副本数 PUT /ptt-new-2018-11/_settings{ "number_of_replicas": 2} 重建索引, 增加节点后要重建索引. 日志报错为网络 ...
- 100-days: fourteen
Title: Face mask craze(面膜热) creates Korean(韩国) (a) billionaire with Goldman(高盛集团) backing face mask ...
- TZOJ 2099 Sightseeing tour(网络流判混合图欧拉回路)
描述 The city executive board in Lund wants to construct a sightseeing tour by bus in Lund, so that to ...
- 213. House Robber II 首尾相同的偷窃问题
[抄题]: You are a professional robber planning to rob houses along a street. Each house has a certain ...
- [leetcode]236. Lowest Common Ancestor of a Binary Tree二叉树最近公共祖先
Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. Accordi ...
- ipv6 docker
DOCKER, IPV6 BASIC CONFIGURATION OF DOCKER ENGINE WITH IPV6 SEPTEMBER 21, 2015 EYEPV6(AT)GMAIL(DOT)C ...
- linux就该这么学,第十天了
今天老师主要让要考试的提前预习课程了,提前预习, 今天讲了,防火墙,iptable.firewall-config,firewall-cmd 防火墙和网卡的配置方法,四种,1配置文件方法,主要开启 ...
- echo 转义字符的使用
man echo 查看 echo 的使用文档 -n 不尾随换行符 -e 启用解释反斜杠的转义功能 -E 禁用解释反斜杠的转义功能(默认) --help 显示此帮助信息并退出 --version 显示版 ...
- CDH 安装
CDH 安装 市场上免费大数据框架主要有三个版本,原生的 Apache 版本,Cloudera(https://www.cloudera.com/) 公司研发的(Cloudera Distributi ...
- centos7配置Hadoop集群环境
参考: https://blog.csdn.net/pucao_cug/article/details/71698903 设置免密登陆后,必须重启ssh服务 systermctl restart ss ...