由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中 ...
随机推荐
- 关于jQuery对象与DOM对象
今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...
- 聊一聊ES5数组(Array)新增的那些方法
一.前言 ES5中新增的一些处理数组(Array)的方法, 对于用JavaScript处理数据非常有用.我总结了一下,给这些方法分了类,大体如下: 2个索引方法:indexOf() 和 lastInd ...
- Maven学习小结(三 基本概念)
1.Maven POM POM(Project Object Model)项目对象模型,是用Maven来管理项目里的一个叫做pom.xml的文件.所有的项目配置信息都被定义在这个文件中, 通过这个文件 ...
- 如何实现XA式、非XA式Spring分布式事务
Spring应用的几种事务处理机制 Java Transaction API和XA协议是Spring常用的分布式事务机制,不过你可以选择选择其他的实现方式.理想的实现取决于你的应用程序使用何种资源,你 ...
- MySQL创建/删除/清空表,添加/删除字段
创建表: create table tablename (column_name column_type); create table table_name( id int not null auto ...
- C语言——结构体
struct 是一种把一些数据项组合在一起的数据结构.在Go,Rust这些新语言中都保留了结构体 struct 的概念,这是C的精华. 定义匿名结构体 例:学生信息定义为一个结构体,信息内容包括学生的 ...
- Android打包失败Proguard returned with error code 1. See console
问题一: [2013-06-28 11:12:10 - ] Proguard returned with error code 1. See console [2013-06-28 11:12:10 ...
- Ubuntu 安装php_intl 扩展
PHP Intl 类在I18n的网站中真的很方便,允许你依赖在终端用户区域,很容易的输出正确的日期格式. 在使用 yii2-app-ecom , 初始化之后,访问首页出现了: The default ...
- Java中startWith方法的使用!
今天看Java代码时,看到了字符串有一个方法是startsWith(String str)当时觉得见名之意,很简单吗,然后就自己动手做了一下,没想到发现了一个startsWith()方法的重载,sta ...
- beanfactory与applicationcontext的区别
ApplicationContext能够自动辨认和应用在其上部署的实现了BeanFactoryPostProcessor的bean 特性 Bean ...