从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居中小结的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. CSS居中的实现用法实例

    转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...

  3. day--43 HTML标签和CSS基本小结

    HTML标签和CSS基本小结一:常用标签 01:块标签 p,h1--h6 ,hr ,div 02:内联标签 b,i,u,s 小提示:块标签可以嵌套内置元素或者某些块级元素,但内联元素不能包含块级元素 ...

  4. 常用的CSS居中方式

    1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...

  5. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  6. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  7. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  8. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  9. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

随机推荐

  1. 7月底的list

    多校的新姿势: 超大数比较 置换群 树归 莫比乌斯反演 7月26日做了的list: a.补了多校的两道题. b.学了如何比较特别多特别大的数 c.看了波循环群   d.看了点kmp 7月27想做的li ...

  2. 2018.12.30 bzoj3027: [Ceoi2004]Sweet(生成函数+搜索)

    传送门 生成函数好题. 题意简述:给出n个盒子,第iii个盒子里有mim_imi​颗相同的糖(但不同盒子中的糖不相同),问有多少种选法可以从各盒子中选出数量在[a,b][a,b][a,b]之间的糖果. ...

  3. CodeForces 946D Timetable (DP)

    题意:给定 n,m,K,表示某个人一个周有 n 天,每天有 m 节课,但是他可以跳过 K 节课,然后下面每行一个长度为 m 个01字符串,0 表示该人在这一小时没有课,1 表示该人在这一个小时有课,每 ...

  4. Django-配置、静态文件与路由

    -----配置文件 1.BASE_DIR BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))   2.DEBU ...

  5. 踏破铁鞋无觅处,从AsyncTask学Android线程池

    android对于主线程的响应时间限制的非常严格,稍有不慎就会遇到Application Not Responding(ANR)的弹框.用户可以轻点手指关掉你的APP.官方文档写的非常明确!同时,保持 ...

  6. Windows 8.1 Update中的小改变

    在Build 2014大会中,发布了Windows 8.1 Update的更新,并将于4月8日通过Windows Update进行推送.但是,在MSDN订阅下载中,带有该更新的镜像已经可以在4月3号放 ...

  7. Windows 8创新之路——样章分享

    在电脑里面躺了大约也有半年多的光景了. 在Windows 8.1还有不到一个月的时间里,将这些内容分享出来,也算是对得起自己那段时间的熬夜. 希望大家多提宝贵意见. 谢! 点击标题可浏览SkyDriv ...

  8. vc6中向vs2010迁移的几个问题

    vc6版本支持的库编译:CJ60lib 1. 用vs2010打开CJ60库的源码的dsw,强制打开 (1)设置项目属性的语言 因为,如果代码字符的编码集不一样,则会出现函数冲定义,参数冲突等问题,这可 ...

  9. 《mysql必知必会》学习_第11章_20180801_欢

    第11章:使用数据处理函数. P69 文本处理函数,upper()函数把文本变成大写字体. select vend_name,upper(vend_name) as vend_name_upcase ...

  10. Eclipse运行wordcount步骤

    Eclipse运行wordcount步骤 第一步:建立工程,导入代码. 第二步:建立文件写入数据(以空格分开),并上传到hdfs上. 1.创建文件并写入数据: 2.上传hdfs 在hadoop权限下就 ...