由12306出错想到的div垂直居中的问题
今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了
看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下12306这么大的网站肯定是可以垂直居中的,
试了一下,果然没有让我失望,适应各种分辨率垂直居中。
太好了,果然右键源代码
div class="err_text">
<ul id="error" >
<li id="err_top"> </li>
<li id="err_bot"> 网络可能存在问题,请您重试一下!
</li>
</ul>
</div>
然后再看一下css是怎么写的吧
.err_text{
position:absolute;
margin-top:-159px;
top:50%;
left:50%;
margin-left:-247px;
width:495px;
height:282px;
}
#error{
width:495px;
margin-left:auto;
margin-right:auto;
list-style:none;
}
#error li{
list-style:none;
}
#err_top{
background:url(err_top.gif) no-repeat;
height:78px;
line-height:78px;
width:495px;
}
#err_bot{
background:url(err_bot.gif) no-repeat;
height:204px;
padding-top:50px;
width:495px;
text-align:center;
font-size:14px;
font-weight:bold;
}
这时候聪明的你一定发现了,关键代码其实就是top:50%,left:50%,当然了前提是要绝对定位,这样就可以实现居中了
由12306出错想到的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 ...
- 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中 ...
随机推荐
- Android 开发中的屏幕适配技术详解
本文主要介绍Android开发中比较头疼繁琐的一个问题-屏幕适配问题.主要从适配原因.基本核心概念.适配方法等方面介详细 介绍从而是的深入或者进一步对Android屏幕适配技术的掌握和理解. 真题园网 ...
- AT-FragmentPagerAdapter
关于FragmentPagerAdapter的粗略翻译 英文版api地址:FragmentPagerAdapter(自备梯子) FragmentPagerAdapter 类概述(Class Ov ...
- 以 280W 数据为依据。对比SQL2008 表分区前和分区后的 T_SQL 效率
一: 数据库的优化一直项目后期的重中之重,特别是当单表数据庞大到1000W时候.各种SQL语句执行效率都会慢很多.SQL 效率 与索引,行数据,列数据,以及Where 刷选字段类型 (效率 整数型大于 ...
- asp快速开发方法之分页函数
log_Content "自己常用的ASP分页代码,将以下代码放入你的函数文件内,在使用的文件内写上<!--#include file="调用文件.asp" /&g ...
- 通过GitHub部署网站到Azure WebSite
一.将代码上传到GitHub存储库中 第一步:创建Github新账户 第二步:新建仓库 第三步:安装Github shell程序,地址:http://windows.github.com/ 第四步:打 ...
- VS打包
同学让帮忙打包个VC的程序,程序比较简单,是带access数据库的统计查询软件,之前用Visual Studio 6.0自带的Package & Deployment Wizard 工具打包过 ...
- 知乎 zhihu
知乎上关于美食的精彩问答有哪些? http://www.zhihu.com/question/22744751/answer/22473212 知乎上关于乐队的精彩问答有哪些? http://www. ...
- 第五篇、HTML标签类型
<!--1.块级标签 独占一行,可以设置高度和宽度 如:div p h ul li -----display: none(隐藏标签) block(让行内标签变块级标签) inline(让块级标 ...
- 2017 google Round D APAC Test 题解
首先说明一下:我只是用暴力过了4道题的小数据,就是简单的枚举,大数据都不会做!下面的题解,是我从网上搜到的解答以及查看排行榜上大神的答案得出来的. 首先贴一下主要的题解来源:http://codefo ...
- 九度OJ 1497 面积最大的全1子矩阵 -- 动态规划
题目地址:http://ac.jobdu.com/problem.php?pid=1497 题目描述: 在一个M * N的矩阵中,所有的元素只有0和1,从这个矩阵中找出一个面积最大的全1子矩阵,所谓最 ...