CSS中各种居中方法,本文回顾一下,便于后续的使用。

水平居中方法

1.行内元素居中

行内元素居中是只针对行内元素的,比如文本(text)、图片(img)、按钮等行内元素,可通过给父元素设置 text-align:center 来实现。另外,如果块状元素属性display 被设置为inline时,也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响,否则一切都是无用功。

2、块状元素居中

(1)定宽块状元素居中

满足定宽(块状元素的宽度width为固定值)和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中。

(2)不定宽块状元素居中

显示:

方法1:这种方法是利用:table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

方法2:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。

输出:

3.position加margin方法实现水平垂直居中
输出:

使用margin:auto和position:absolute来实现居中显示。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。

4display:flex和margin:auto使用

实现效果如上图。

display:flex是弹性布局,后面慢慢介绍下flex的属性。

5.使用display:flex;align-items: center;justify-content: center,这是移动端首选
输出:

6,纯position实现水平垂直居中

输出:

这里的话,子容器的子元素(con)的left值计算公式:left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;
子元素(con)的top值计算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;

第二种代码是直接

left值固定为50%;子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;top值也一样,固定为50%,子元素的margin-top= -(子元素的高/2)=-100/2= -50px;

这两种方法适用于所有的浏览器。

CSS中各种居中方法的更多相关文章

  1. CSS中各种各样居中方法的总结

    在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...

  2. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  3. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  4. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  5. css中的居中问题

    前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...

  6. css中关于居中的问题

    居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...

  7. CSS中水平居中的方法

    居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...

  8. css中的居中的方法

    一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...

  9. CSS中各种居中的问题

    1.元素水平居中 1.1 在父元素上使用text-align: center; father { text-align: center; } 1.2 margin: 0 auto; 在上一个问题中,我 ...

随机推荐

  1. 模板——网络流Dinic

    感谢这位大佬的博客:https://www.cnblogs.com/SYCstudio/p/7260613.html 给予了我莫大的帮助! 主要说一下网络流的几个注意点: 1.和二分图匹配相似,无法继 ...

  2. 编写函数处理user_list,新方法

    写函数,完成以下功能: # 例如有: user_list=[ {"name": "alex","hobby":"抽烟"} ...

  3. 从0开始学习ssh之日志工具与配置log4j

    添加slf4j-api-1.6.1,slf4j-log4j12-1.6.1,log4j-1.2.15三个jar包到lib文件夹下就可以使用log4j日志文件.具体配置在log4j.properties ...

  4. hiveUDF的使用

    在此自己总结下UDF的用法 1.首先最简单的UDF(普通用java扩充函数的方式,大多数简便函数可以用这个函数来实现,返回单个字段),其加强版UDGF据说对map一类数据类型有更好兼容,实现上略复杂 ...

  5. Jenkins自动部署springboot项目

    说明: 该示例为在windows系统下自动化部署springboot 架构: springboot + github + gradle + jdk8 各种配置步骤及截图说明: 1.配置git,grad ...

  6. jdk不同版本的垃圾收集器

  7. 88 Lowest Common Ancestor of a Binary Tree

    原题网址:https://www.lintcode.com/problem/lowest-common-ancestor-of-a-binary-tree/description 描述 给定一棵二叉树 ...

  8. 移动端iPhone系列适配问题

    问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appear ...

  9. 【DM642学习笔记四】flash烧写过程——错误记录…

    (欢迎批评指正) 一,打开.cdd配置文件时出错: 解决:在FlashBurn配置窗口中,Conversion Cmd一栏可不用管:      菜单Program—Download FBTC,load ...

  10. 数据交换格式之 - XML

    XML简介 XML是一种可扩展的标记语言,被设计用来传输和存储数据.传输数据. 需要自定义标签,自我描述性,XML是W3C的推荐标准: XML的特点与作用 特点: xml与操作系统.编程语言的开发平台 ...