从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. python之Bottle框架

    一.简单的Bottle框架 1)bottle框架简介 安装 pip install bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架. 此框架只由一个 .py 文件,除 ...

  2. java笔记--问题总结

    1. 垃圾回收算法 标记-清除算法 标记-清除算法是最基本的算法,和他的名字一样,分为两个步骤,一个步骤是标记需要回收的对象.在标记完成后统一回收被标记的对象.这个算法两个问题.一个是效率问题,标记和 ...

  3. 整合SPRING CLOUD云服务架构 - 企业分布式微服务云架构构建

    整合SPRING CLOUD云服务架构 - 企业分布式微服务云架构构建 1.   介绍 Commonservice-system是一个大型分布式.微服务.面向企业的JavaEE体系快速研发平台,基于模 ...

  4. 27、Label 自适应文本 xib

    第一步: 第二步: 第三步: 第四步:

  5. 2018.11.24 poj3261Milk Patterns(后缀数组)

    传送门 后缀数组经典题. 貌似可以用二分答案+后缀数组? 我自己yyyyyy了一个好写一点的方法. 直接先预处理出heightheightheight数组. 然后对于所有连续的k−1k-1k−1个he ...

  6. 线性回归,多项式回归(P2)

    回归问题 回归问题包含有线性回归和多项式回归 简单来说,线性回归就是用多元一次方程拟合数据,多项式回归是用多元多次来拟合方程 在几何意义上看,线性回归拟合出的是直线,平面.多项式拟合出来的是曲线,曲面 ...

  7. Mysql通过sql语句添加约束和查看约束

    一:添加约束 1.添加唯一约束:alter table student add constraint uk_name unique(name); 2.添加外键约束: alter table 表名 ad ...

  8. 容器,表格 ,div,元素可左右拖动,滚动 css

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

  9. 20155205 2016-2017-2 《Java程序设计》第8周学习总结

    20155205 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO使用频道来衔接数据节点,可以设定缓冲区容量,在缓冲区中对感兴趣的数据区块进行 ...

  10. java基础-day14

    第01天 java面向对象 今日内容介绍 u 接口 u 匿名对象&final u 多态 第1章   接口 1.1  接口的概述 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的 ...