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

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. 纳税服务系统【自动受理,Quartz任务调度】

    需求 回到我们的需求: 自动投诉受理:在每个月月底最后一天对本月之前的投诉进行自动处理:将投诉信息的状态改为 已失效.在后台管理中不能对该类型投诉进行回复. 这个需求需求我们要怎么弄呢????要在每个 ...

  2. Hibernate中cascade属性的区别

    xml对于集合的级联操作属性cascade的取值可以是: none: 不级联操作,默认为none save-update:针对的是当对当前对象进行save或update操作时,要对想关联的对象进行sa ...

  3. Ubuntu Server 17.04安装GNOME指令

    短短几行指令,从安装到打开: apt-get install gnome-shell apt-get install xinit xshell 开启  关闭: Ctrl+Alt+F1   Ctrl+A ...

  4. 框架应用:Mybatis(二) - 动态SQL

    MybatisUtil工具类 在实际开发中,我们可以编写一个MybatisUtil辅助类来进行对进行操作. 1)在静态初始化块中加载mybatis配置文件和StudentMapper.xml文件一次 ...

  5. Hadoop的safeMode

    当集群启动的时候,会首先进入到安全模式.系统在安全模式下,会检查数据块的完整性.假设我们设置的副本数(即参数dfs.replication)是5,那么在dataNode上就应该有5个副本存在,假设只存 ...

  6. Eclipse dynamic web project 插件

    下载了Eclipse Oxygen   发现没有Dynamic web  Project 首先我们先了解下Dynamic  Web Project  If you want to create a c ...

  7. 将Editplus添加到右键打开菜单

    因为自己一直用Editplus作为文本打开工具,新的电脑将压缩文件复制了过来,但是没有右键打开了. 第一打开注册表 在命令框中输入regedit 第二在注册表中输入选项 如下图所示在下拉菜单中新建Ed ...

  8. Ansible系列(七):执行过程分析、异步模式和速度优化

    本文目录:1.1 ansible执行过程分析1.2 ansible并发和异步1.3 ansible的-t选项妙用1.4 优化ansible速度 1.4.1 设置ansible开启ssh长连接 1.4. ...

  9. IO模型分析

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  10. 2013 ACM/ICPC Asia Regional Hangzhou Online hdu4739 Zhuge Liang's Mines

    Zhuge Liang's Mines Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...