CSS:position+居中

position

position 的四个属性:static、absolute、relative、fixed

static:默认值

absolute:脱离文档结构,导致父元素坍塌;相对于最近的非static元素进行定位;使得inline元素被“块”化;使得元素已有的float失效。多个悬浮元素,后来者在上方;

relative:根据原来位置,导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。

产生新的定位上下文,影响子元素(如absolute属性元素定位)

fixed:根据浏览器确定位置

参考文章:https://www.cnblogs.com/wangfupeng1988/p/4322680.html

居中

css原理:

vertical-align :指定行内元素(inline)和行内块级元素(inline-block)或表格单元格(table-cell)元素的垂直对齐方式。

文本垂直居中:

单行文本:设置line-height 和区域高度height 一致即可

多行文本垂直居中:

1、父级元素高度不固定,随内容变化:内填充padding-top = padding-bottom

2、父级元素高度固定:

父元素div:display:table

子元素div:display:table-cell;vertical-align:middle

子div垂直居中:

1、子div具体大小设置偏移

2、利用transform:translateX(-50%)translateY(-50%);

3、利用绝对布局absolute

4、利用vertical-align属性实现子div大小不固定垂直居中

5、利用display:flex:

justify-content: center;/*实现水平居中*/

align-items:center; /*实现垂直居中*/

参考链接:https://blog.csdn.net/u014607184/article/details/51820508

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 10,139评论 5 15
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,345评论 0 5
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,580评论 0 1
  • 最近被工作压制到整个人有点颓废,不想学习,不想健身,不想运动,再加上男朋友本身也是那种懒得一塌糊涂的人,所以生活有...
    一只猪女孩都精致生活阅读 1,417评论 0 0