让div垂直居中
参考链接:https://www.cnblogs.com/softwarefang/p/6095806.html
以前我的方法总是比较粗暴,纯粹通过margin来实现,这个方法的缺点不仅在于需要多次微调来确定margin的值,更愚蠢的地方在于,这个办法太没有技术了,设置margin会对页面原本元素的尺寸造成影响,刚好最近用这个东西比较多,我就抱着不怕学不会的心态上网搜索了一下,结果看到了一个这样的方法。
div{
width:260px;
height: 210px;
position: absolute;
left: 50%;
top:50%;
margin: -105px 0 0 -130px;
}
这个方法的大概思想是想通过定位来让盒子定外到一个大致的区域,然后再根据他的长宽算出这样定位的误差,用margin去修正,这样就让一个盒子实现了水平和垂直居中。
使用margin的css,这样会造成全屏时的浏览器窗口出现上下的滚动条。
div{
width:260px;
height: 210px;
margin:20% auto;
background:rgb(194, 199, 202, 0.3);
text-align: center;
background-size: cover;
}
让div垂直居中的更多相关文章
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- div垂直居中的问题
工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...
- 由12306出错想到的div垂直居中的问题
今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了 看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下1 ...
- css的div垂直居中的方法,百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- css 文本和div垂直居中方法汇总
https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...
- 纯css使div垂直居中,div垂直,div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- 路飞学城Python-Day31
19-生产者消费者模型 生产者:生成数据的任务 消费者:处理数据的任务 在并发编程的过程中,如果生产者处理速度很快,而消费者处理速度很慢,那么生产者就必须等待消费者处理,才能继续生产数据:同样的,如果 ...
- 路飞学城Python-Day19(Py_Notes)
# 先定义类 class LuffyStudent: school = 'luffy' def learn(self): print('学习使我快乐') def eat(self): print('吃 ...
- JavaScript高级程序设计部分笔记
1.JavaScript由三个不同的部分组成:ECMAScript(核心).DOM(文档对象模型).BOM(浏览器对象模型). 2.数据的引用类型 Object类型 Array类型 Data类型 Re ...
- CentOS 7编译安装Python3.7.X
在CentO S上通过编译安装Python3.7,添加python3软链,并使用python3. 环境 安装环境如下: Windows 10 Pro VMWare Workstation 15 Pro ...
- 分清encodeURIComponent encodeURI 和 escape
encodeURIComponent encodeURI escape 目的:这三个函数的作用都是让一段字符串在所有电脑(所有国家区域语言)上可读. escape对字符串进行处理: encodeURI ...
- 【BZOJ1396】识别子串 - 后缀自动机+线段树
题意: Description Input 一行,一个由小写字母组成的字符串S,长度不超过10^5 Output L行,每行一个整数,第i行的数据表示关于S的第i个元素的最短识别子串有多长. 题解: ...
- Linux Mint 17.1 安装全配置
Linux Mint 17.1 安装全配置 I. 前言 由于自己的本子出现了一些故障需要重新安装系统,就上网看看今年4,5月份发布的一些新的发行版来试试.原先电脑上安装的是opensuse13.2, ...
- ASP.NET-未解决的问题
001.((FormsIdentity)User.Identity).Ticket.UserData 用ASP.NET后台格式化成json数据后传回去的数据有"这样的符号 002.HT ...
- [AngularJS]Chapter 8 秘籍诀窍
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <met ...
- HTML---经常使用标签总结与实践
什么是HTML? 超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内能够包括图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包含" ...