css居中小结
从css入门就开始接触,无所不在的,一直备受争议的居中问题。
css居中分为水平居中和垂直居中,水平居中方式也较为常见和统一,垂直居中的方法就千奇百怪了。
博客原文地址:Claiyre的个人博客 https://claiyre.github.io/
如需转载,请在文章开头注明原文地址
本文一下代码中 .outer是父元素的类名,.inner块级代表子元素,span代表行内子元素
水平居中
1. 行内元素的水平居中
直接设置其父元素
.ourter{
text-align: center;
}
不管有几个行内元素,一行代码即可搞定,so easy~
2. 块级元素的水平居中
也非常简单呐
设置该块级元素
div{
margin: 0 auto;
}
但是!但是!如果该元素的position为absolute的话,该方法会失效。
我是这样理解的:margin为auto即相当于外边距的值是自动的,相对的,所以在绝对定位下将失效。不过还是可以将其margin设为具体数值滴。
垂直居中
有很多关于垂直居中tricks,博主在这里只介绍一些比较简单常用的
如果对高度没有要求的哈
1. 行内元素的垂直居中
1)如果对父元素的高度没有具体的要求的话,将父元素的padding-top padding-bottom设置为相同的值即可。
.outer{
padding-top: 60px;
padidng-bottom: 60px;
width:300px;
height: auto; /*注意:此时父元素的height不能是具体数值*/
}
2)如果要求父元素的高度为具体数值时,且确保行内元素不会换行时,可以设置line-height等于父元素的高度
.outer{
width: 300px;
height: 200px;
line-height: 200px;
/*text-align: center; */
}
此时,即可实现行内元素的垂直居中。若把最后一行加上,即可同时实现水平和垂直居中。
但是!!!一定要确保不会换行,也就是只有一行。
3)在保持父元素具体数值宽度不变且有不止一行时,可以使用一点小tricks,比如
.outer{
text-align: center;
height: 200px;
width: 300px;
}
.outer::before{
content: " ";
height: 100%;
width: 1%;
display: inline-block;
vertical-align: middle;
}
/*html代码如下*/
<div id="outer">
<span>span1</span>
<span>span2</span>
</div>
但是,注意:因为vertical-align是指行内元素的基线相对于该元素所在行的基线的垂直对齐方式,所以该方法只对行内元素有效
效果:
2. 块级元素的垂直居中
1)如果已知子元素的高度,可以这样
.outer{
position: relative;
}
.inner{
height:50px;
width:50px;
position: absolute;
top: 50%;
margin-top: -25px;
}
注意子元素和父元素的position,切记父元素的position是relative
2)如果不知道子元素的具体高度,可以利用css的transform属性,对1)进行小改动,如下:
.outer{
position: relative;
}
.inner{
width:50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
3)但以上两种方式对于有多个块级子元素的情况就不适用了,比如,这样的情况
这时我们可以用一个div把所有子元素包裹起来,变成一个子元素,然后就可以继续使用上面的方法了。
** 最最后!上面的所有方法都是在不使用flex的前提下的才使用的!解决居中问题最爽的当然是flex布局啦,O(∩_∩)O~~ **
什么?!还不会使用flex布局?赶紧点下面~
flex布局学习总结
使用flex,管它是行内元素还是块级元素,管它有几个元素,统统搞定!
举个栗子!
实现多个块级元素的垂直加水平居中
.outer{
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
/* flex-direction: column; */
}
效果图如下:
如果加上最后一行,则竖直排列子元素,即:
是不是很简便腻~O(∩_∩)O哈!
css居中小结的更多相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- CSS居中的实现用法实例
转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...
- day--43 HTML标签和CSS基本小结
HTML标签和CSS基本小结一:常用标签 01:块标签 p,h1--h6 ,hr ,div 02:内联标签 b,i,u,s 小提示:块标签可以嵌套内置元素或者某些块级元素,但内联元素不能包含块级元素 ...
- 常用的CSS居中方式
1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- CSS居中完全解决方案
上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...
- 理解CSS居中
我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...
随机推荐
- 7月底的list
多校的新姿势: 超大数比较 置换群 树归 莫比乌斯反演 7月26日做了的list: a.补了多校的两道题. b.学了如何比较特别多特别大的数 c.看了波循环群 d.看了点kmp 7月27想做的li ...
- 2018.12.30 bzoj3027: [Ceoi2004]Sweet(生成函数+搜索)
传送门 生成函数好题. 题意简述:给出n个盒子,第iii个盒子里有mim_imi颗相同的糖(但不同盒子中的糖不相同),问有多少种选法可以从各盒子中选出数量在[a,b][a,b][a,b]之间的糖果. ...
- CodeForces 946D Timetable (DP)
题意:给定 n,m,K,表示某个人一个周有 n 天,每天有 m 节课,但是他可以跳过 K 节课,然后下面每行一个长度为 m 个01字符串,0 表示该人在这一小时没有课,1 表示该人在这一个小时有课,每 ...
- Django-配置、静态文件与路由
-----配置文件 1.BASE_DIR BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 2.DEBU ...
- 踏破铁鞋无觅处,从AsyncTask学Android线程池
android对于主线程的响应时间限制的非常严格,稍有不慎就会遇到Application Not Responding(ANR)的弹框.用户可以轻点手指关掉你的APP.官方文档写的非常明确!同时,保持 ...
- Windows 8.1 Update中的小改变
在Build 2014大会中,发布了Windows 8.1 Update的更新,并将于4月8日通过Windows Update进行推送.但是,在MSDN订阅下载中,带有该更新的镜像已经可以在4月3号放 ...
- Windows 8创新之路——样章分享
在电脑里面躺了大约也有半年多的光景了. 在Windows 8.1还有不到一个月的时间里,将这些内容分享出来,也算是对得起自己那段时间的熬夜. 希望大家多提宝贵意见. 谢! 点击标题可浏览SkyDriv ...
- vc6中向vs2010迁移的几个问题
vc6版本支持的库编译:CJ60lib 1. 用vs2010打开CJ60库的源码的dsw,强制打开 (1)设置项目属性的语言 因为,如果代码字符的编码集不一样,则会出现函数冲定义,参数冲突等问题,这可 ...
- 《mysql必知必会》学习_第11章_20180801_欢
第11章:使用数据处理函数. P69 文本处理函数,upper()函数把文本变成大写字体. select vend_name,upper(vend_name) as vend_name_upcase ...
- Eclipse运行wordcount步骤
Eclipse运行wordcount步骤 第一步:建立工程,导入代码. 第二步:建立文件写入数据(以空格分开),并上传到hdfs上. 1.创建文件并写入数据: 2.上传hdfs 在hadoop权限下就 ...