css垂直居中方法总结
在网页布局中，我们往往会遇到下图所示的场景，让小图标和文字对齐
可能有的小伙伴会说，这个简单，直接给小图标设置左浮动来实现。
这样做是可以的，但不推荐，毕竟浮动是会影响布局的，能少用还是少用。
以前遇到这种场景，其实挺头疼的，我是直接给小图标设置相对定位，然后调整top值。好像找不到更好的办法，也就没去管了。
直到后来偶然看了张鑫旭大神关于vertical-align属性的视频讲解，感觉发现了新大陆。
下面总结了2种方法，只需要一句代码即可解决（强烈推荐第二种）
①：给小图标加上 vertical-align:middle;
以前因为IE6,7对该属性不支持，所以还要使用csshack，
现在主流浏览器都已经很好的支持了，而且谁还管万恶的低版本IE浏览器兼容喔（eat shift）
②：给小图标加上 vertical-align:-2px;（这里的负值根据你的情况自行设置，这种方法没有兼容性问题）
注：如果当你遇到第一种方法用了没有效果或者用着很不开心的时候，强烈推荐使用第二种方法
顺便总结了一些其它小技巧，害怕自己以后忘记，也希望帮到有需要的小伙伴
问题1：怎么让定位元素垂直居中的三种方法？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div01 {
width:200px;
height:200px;
background-color:#6699FF;
position:absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="div01"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div01 {
width:200px;
height:200px;
background-color:#6699FF;
position:absolute;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="div01"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位元素居中</title>
<script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
.div{
width: 500px;
height: 300px;
background-color: red;
position: absolute;
left: 50%;
top:50%;
margin: -150px 0px 0px -250px;
}
</style>
<body>
<div class="div"></div>
</body>
</html>
注： 上面三种都是在知道具体宽高的情况下，如果不知道元素宽高怎么让其垂直居中呢？（利用transform属性）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style> <body>
<img src="img/1.jpg" />
</body> </html>
问题2：怎么让文字垂直居中？
(给一个空标签，然后给空标签设置display:inline-block;height:100%;width:1px;vertical-align:middle;）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>文字垂直居中</title>
<style type="text/css">
.test {
width: 500px;
padding: 10px;
border: 1px solid red;
text-align: center;
} .test div {
display: inline-block;
padding: 3px;
width: 200px;
border: 1px solid #CCCCCC;
} .test span {
display: inline-block;
height: 100%;
width: 1px;
vertical-align: middle;
}
</style>
</head> <body>
<!--用一个高度100% 宽1px display: inline-block 的空标签 然后使用vertical-align: middle; 就可以在高度不固定的情况下 自动居中--> <div class="test">
<div>
青青园中葵，朝露待日晞。 阳春布德泽，万物生光辉。 常恐秋节至，焜黄华叶衰。 百川东到海，何时复西归？ 少壮不努力，老大徒伤悲。青青园中葵，朝露待日晞。 阳春布德泽，万物生光辉。 常恐秋节至，焜黄华叶衰。 百川东到海，何时复西归？ 少壮不努力，老大徒伤悲。
</div>
<span></span>
</div> </body> </html>
问题3：怎么让一个块元素水平居中，块元素里的文字也水平居中？
给这个块元素设置一个固定宽度，然后加上margin:0 auto; 在给里面的元素设置text-align:center;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main {
width: 400px;
margin: 0 auto;
background-color: chocolate;
}
.main p {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<p>珍爱生命，远离IE</p>
</div>
</body>
</html>
补充：最简单的实现左边定宽，右边自适应布局（给左边设置固定宽度，然后加浮动；右边设置宽度百分百，不加浮动）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
color: #fff;
font-size: 30px;
font-weight: bold;
text-align: center;
box-sizing: border-box;
} aside {
float: left;
width: 200px;
height: 200px;
line-height: 200px;
background: #5A6A94;
} section {
width: 100%;
height: 200px;
line-height: 200px;
background: #BE4F4F;
}
</style>
</head> <body>
<!-- 左边定宽 -->
<aside class="left">Left</aside>
<!-- 右边自适应 -->
<section class="right">Right</section>
</body> </html>
css垂直居中方法总结的更多相关文章
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- css垂直居中方法
CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.
- css垂直居中方法（四）
第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...
- css 垂直居中方法总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...
- css 垂直居中方法汇总
查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...
- css垂直居中方法盘点
1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...
- [css] 垂直居中方法
原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...
- css垂直居中方法（二）
第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...
- css垂直居中方法（一）
第一种方法:首先用margin:0 auto实现水平居中,然后设置position:relative,设置top为50%(父元素高度的50%),然后设置margin-top:-150px(设置负值是因 ...
随机推荐
- java.exe进程来源排查录
解决后的一个小结:此处是一个tomcat端口,这种情况下,可以先在浏览器访问下看看效果,就可以快速定位 又发现一个简单的办法: 下面的定位过程,适用于各种场合 无意中发现有个进程开了好多端口,很奇怪 ...
- app后端设计(7)-- 项目管理
移动互联网行业是个快速发展的行业,需求不断变化,产品更新快.基于移动互联网的以上特点,在开发产品的过程中,我们放弃了传统的瀑布流开发模型,引入了精益的理念和scrum这个敏捷开发框架,下面谈谈实施过程 ...
- java某些基础知识点整理
1. \n换行 \r回车 \"双引号 \\反斜杠 2.Java语言提供了八种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. byte: byte 数据类型是 ...
- linux学习之路(1)
Linux基础命令 命令格式: 命令名称 [参数] [对象] 命令参数的长格式与短格式: 长格式:man -- help 短格式:man - h 常用系统工作命令 echo 输出语句 ...
- JavaScript对象的指向问题
JavaScript对象的指向问题 标签(空格分隔): JavaScript 对象 在接触了JavaScript之后,我们常听到一句话就是一切皆对象,意思是说除了object以外,JavaScript ...
- 毕业原版=[约克大学毕业证书]York原件一模一样证书
约克大学毕业证[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归& ...
- SQL Android
SQLite是一款轻量级的关系型数据库,它的运算速度非常快,占用资源很少. 一般有以下几个关键步骤: 1.创建数据库 2.创建表 3.操作:增删改查 4.关闭数据库 5.删除表(非必选) SQLite ...
- C++解析头文件-Qt自动生成信号声明
目录 一.瞎白话 二.背景 三.思路分析 四.代码讲解 1.类图 2.内存结构声明 3.QtHeaderDescription 4.私有函数讲解 五.分析结果 六.下载 一.瞎白话 时间过的ZTMK, ...
- 已实现乐观锁功能，FreeSql.DbContext 准备起航
上回说到 FreeSql.DbContext 的规则,以及演示它的执行过程,可惜当时还不支持"乐观锁",对于更新数据来讲并不安全. FreeSql 核心库 v0.3.27 已提供乐 ...
- Docker安装+HelloWorld+运行Tomcat
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 上一篇已经讲解了为什么需要Docker?,相信大家已 ...