---恢复内容开始---

1.文字垂直居中

.header_nav-item{
height:38px;
line-height:38px;
}

 即文字所在模块的高度和行高设置成一样的!

2.块元素垂直居中与父元素 

.header_wrap{
height:80px;
position:realitive;
} .header_logo{
height:38px;
position:absolute;
top:50%;
margin-top:-19px
}

即父元素设置成相对定位,子元素设置成绝对定位,且子元素中top为50%,margin-top为-(负)height的一半。是一种比较经典的块元素居中法!

3.块元素(容器)水平居中    

.header_warp{
margin: 0 auto;
}

即元素上下为0,左右设置成自动!

总之是很基础的方法,但经常用到,应该熟记!

---恢复内容结束---

css中居中方法小结的更多相关文章

  1. css清除浮动方法小结

    清除浮动其实主要解决的就是高度塌陷问题,具体在此不再赘述~~~那些年我们一起清除过的浮动(大佬博客,写的挺不错) 方法小结:1. 1)添加额外标签 这是在学校老师就告诉我们的 一种方法,通过在浮动元素 ...

  2. CSS布局---居中方法

    在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...

  3. CSS中居中的完全指南(中英对照翻译)

    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...

  4. css居中方法小结

    水平居中 行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 块状元素 当被设置元素为 块状元素 时用 text-align: ...

  5. css中居中的居中方法

    1:给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 2:居中一个浮动元素 确定容器的宽高 宽500 高 300 的层 ...

  6. ****CSS各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  7. 【CSS】css各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

  8. css 元素居中方法

    目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...

  9. [转载]CSS各种居中方法

    水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素.他们起作用的首要条件是子元素必须没有被flo ...

随机推荐

  1. 【java】聊聊java里的接口

    接口的概念 java中的接口用于描述类应该具备什么样的功能,而不给出具体的实现,一个类可以“实现”多个接口 [注意]接口不是类,而是对类的一组描述   还是让我们通过一个例子来看看接口如何运作吧!   ...

  2. C++临时对象以及针对其进行的优化

    C++临时对象以及针对其进行的优化 C++中真正的临时对象是看不见的,它们不出现在你的源代码中. 那么什么时候回产生临时对象呢?主要是三个时刻: 产生临时对象的三个时刻: 用构造函数作为隐式类型转换函 ...

  3. 使用Gateway-Worker实现多人分组实时聊天 结合第三方tp

    一.基础知识1.Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架.被广泛的用于手机app.移动通讯等领域的开发. 支持TCP长连接,支持Websocket.HTTP等 ...

  4. Redis的安装以及在项目中使用Redis的一些总结和体会

    第一部分:为什么我的项目中要使用Redis 我知道有些地方没说到位,希望大神们提出来,我会吸取教训,大家共同进步! 注册时邮件激活的部分使用Redis 发送邮件时使用Redis的消息队列,减轻网站压力 ...

  5. php多态

    多态性是指相同的操作或函数.过程可作用于多种类型的对象上并获得不同的结果.不同的对象,收到同一消息将可以产生不同的结果,这种现象称为多态性. 多态性允许每个对象以适合自身的方式去响应共同的消息.多态性 ...

  6. AngularJS–service(服务)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 服务 Angular的服务也是使用依赖注入(dependency injection ( ...

  7. 第4章 同步控制 Synchronization ----同步机制的摘要

    同步机制摘要Critical Section Critical section(临界区)用来实现"排他性占有".适用范围是单一进程的各线程之间.它是:  一个局部性对象,不是一个核 ...

  8. Python数据分析(二): Numpy技巧 (1/4)

    In [1]: import numpy numpy.__version__ Out[1]: '1.13.1' In [2]: import numpy as np  

  9. poj2337欧拉回路要求输出路径

                         Catenyms Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8368   Ac ...

  10. bzoj1806 [Ioi2007]Miners矿工配餐

    [bzoj1806][Ioi2007]Miners 矿工配餐 2014年7月10日1,7870 Description 现有两个煤矿,每个煤矿都雇用一组矿工.采煤工作很辛苦,所以矿工们需要良好饮食.每 ...