CSS中各种居中方法
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中各种居中方法的更多相关文章
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
- css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结 第一种,在固定布局中比较常用的技巧设置container的margin:0 auto: 第二种(从布局中入手) css .outer{ height:200 ...
- CSS中垂直居中的方法
昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...
- css中的居中问题
前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...
- css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
- CSS中水平居中的方法
居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...
- css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
- CSS中各种居中的问题
1.元素水平居中 1.1 在父元素上使用text-align: center; father { text-align: center; } 1.2 margin: 0 auto; 在上一个问题中,我 ...
随机推荐
- 模板——网络流Dinic
感谢这位大佬的博客:https://www.cnblogs.com/SYCstudio/p/7260613.html 给予了我莫大的帮助! 主要说一下网络流的几个注意点: 1.和二分图匹配相似,无法继 ...
- 编写函数处理user_list,新方法
写函数,完成以下功能: # 例如有: user_list=[ {"name": "alex","hobby":"抽烟"} ...
- 从0开始学习ssh之日志工具与配置log4j
添加slf4j-api-1.6.1,slf4j-log4j12-1.6.1,log4j-1.2.15三个jar包到lib文件夹下就可以使用log4j日志文件.具体配置在log4j.properties ...
- hiveUDF的使用
在此自己总结下UDF的用法 1.首先最简单的UDF(普通用java扩充函数的方式,大多数简便函数可以用这个函数来实现,返回单个字段),其加强版UDGF据说对map一类数据类型有更好兼容,实现上略复杂 ...
- Jenkins自动部署springboot项目
说明: 该示例为在windows系统下自动化部署springboot 架构: springboot + github + gradle + jdk8 各种配置步骤及截图说明: 1.配置git,grad ...
- jdk不同版本的垃圾收集器
- 88 Lowest Common Ancestor of a Binary Tree
原题网址:https://www.lintcode.com/problem/lowest-common-ancestor-of-a-binary-tree/description 描述 给定一棵二叉树 ...
- 移动端iPhone系列适配问题
问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appear ...
- 【DM642学习笔记四】flash烧写过程——错误记录…
(欢迎批评指正) 一,打开.cdd配置文件时出错: 解决:在FlashBurn配置窗口中,Conversion Cmd一栏可不用管: 菜单Program—Download FBTC,load ...
- 数据交换格式之 - XML
XML简介 XML是一种可扩展的标记语言,被设计用来传输和存储数据.传输数据. 需要自定义标签,自我描述性,XML是W3C的推荐标准: XML的特点与作用 特点: xml与操作系统.编程语言的开发平台 ...