顶部固定居中

 <div class="w960 fixed">
我是固定的
</div> .w960{
width: 960px;
margin:0 auto;
}
.fixed{
position: absolute;
top:0;
left: 0;
right: 0;
height: 90px;
background: #ececec;
}

垂直居中

<div id="box">
<div class="son">ssss</div>
</div> #box {
width: 600px;
height: 500px;
position: relative;
border: 1px solid #f00;
}
.son {
width: 100px;
height: 100px;
border: 1px solid #ecc;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}

css在盒子中垂直居中和固定居中的更多相关文章

  1. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  2. CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

     CSS 实现盒子模型水平居中 水平居中效果图如下: HTML: CSS 全局样式: 方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候) 方法二:text-align + disp ...

  3. 【转】CSS中怎么让DIV居中

    来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html     CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...

  4. CSS中怎么让DIV居中(转载)

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  5. CSS中怎么让DIV居中

    CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...

  6. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

  7. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  8. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  9. CSS(九):设置盒子水平垂直居中

    通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. lvs+keepalive构建高可用集群

    大纲 一.前言 二.Keepalived 详解 三.环境准备 四.LVS+Keepalived 实现高可用的前端负载均衡器 一.前言        Keepalived使用的vrrp协议方式,虚拟路由 ...

  2. 第一章 C++基本认识

    1.使用visual studio时让程序暂停,在return前加上这个: char response; std::cin >> response; 2.c++程序开发流程 3.变量名的命 ...

  3. JAVA 调用 R 语言

    1 简介 R是统计计算的强大工具,而JAVA是做应用系统的主流语言,两者天然具有整合的需要.关于整合,一方面,R中可以创建JAVA对象调用JAVA方法,另一方面,JAVA中可以转换R的数据类型调用R的 ...

  4. 使用guava变形数据结构

    在java日常开发中,经常需要使用各种数据结构,在涉及到数据结构之间如何优雅的转换时,我们可以借助google的guava提供的相关功能来优雅的实现.以下记录一些开发中经常需要使用数据结构的变形,以便 ...

  5. thinkpadE470 win10安装虚拟机时出现‘intel VT-x’处于禁用状态 无法执行64位操作系统

    上图为安装虚拟机时弹出的问题. 解决办法: 本人电脑型号为thinkpadE470.遇到此问题查阅了很多,都是针对一般电脑的.折腾了好一会儿.故特写一篇针对此型号的. 1.重启计算机,一开始出现联想标 ...

  6. MySQL基本应用

    1.默认类型转换 CREATE TABLE `indextest` (`id` int(10)  AUTO_INCREMENT,`name` varchar(10) DEFAULT NULL, PRI ...

  7. vuex学习笔记

    一.vuex的目的 把组件的共享状态抽取出来,以一个全局单例模式管理.在这种模式下,组件树构成了一个巨大的视图,不管在树的哪个位置,任何组件都能获取状态或触发行为. 二.vuex集中式管理数据 安装 ...

  8. docker dead but pid file exists

    CentOS 6安装docker 报docker dead but pid file exists 执行 yum install epel-release yum install docker-io ...

  9. 应用负载均衡之LVS(三):使用ipvsadm以及详细分析VS/DR模式

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  10. 如何在CentOS 7上部署Google BBR【搬运、机翻】

    如何在CentOS 7上部署Google BBR 本文章搬运自 https://www.vultr.com/docs/how-to-deploy-google-bbr-on-centos-7 [注:文 ...