居中对齐

中央-居中CSS

梗概:

针对两种布局模式, 有不同的方法, 而弹性布局模式更为推荐, 非常简单, 效果好, 问题少

基本概念:

• 居中总是相对某个外部的框而言的
• 需要居中的元素称为被居中元素
• 被居中元素所相对的大框, 称为框架元素

对于被居中元素进行分类

行内元素

child::居中行内元素

块级元素以及行内元素

1. 弹性布局模式:⭐

弹性布局-flex

1. 在容器上添加弹性布局样式
2. 对容器内的item, 设置justify-content和align-items都为center

2. 位置布局模式:

1. 自动偏移

1.1. 优点:

• 不需要知道父元素和子元素的具体长宽

1.2. absolute + margin auto

• 在框架元素上添加position样式 ^a7df06
  • 通常为relative, 当然特殊需求也可以为其他值, 只要不是static就行
• 被居中元素上添加position:absolute
• 被居中元素上添加margin:auto样式
• 被居中元素根据需要, 添加以下样式:
  • 垂直居中: top:0, bottom:0
  • 水平居中: left:0, right:0

1.3. absolute + transform

child::

Transclude of 居中对齐#^a7df06

• 被居中元素上添加position:absolute
• 对于被居中元素, 根据需求, 添加以下样式:
  • 水平居中: left:50%, transform:translate(-50%)
  • 垂直居中: top:50%, transform:rtanslate(0,-50%)

2. 手动指定偏移一半像素

利用行内标签的对齐属性

• 将需要对齐的元素设为行内标签或行内块级标签
• 设置父元素的line-height样式等于高度
• 设置文本对齐样式
• 还原居中元素的line-height样式为默认值
  • 这样就不会让子元素也继承居中样式
• 如果用到了水平居中，对居中元素，取消继承水平对齐样式

1. 缺点：

• 垂直居中比较麻烦
• 垂直居中需要知道父元素的高度

设置为table-cell样式

• 对于待居中元素的父元素，设置display:table-cell
  • 会将这个标签类似于一个表格单元格那样显示
  • 这样就能直接使用对齐样式
• 对待居中元素的父元素，设置文本对齐样式
• 如果设置了水平居中，则对居中元素，取消继承父元素的水平居中样式

1. 缺点：

• 改变父元素的显示模式

优点:

• 不需要知道父元素的具体宽高

利用writing-mode样式

• 对于待居中元素的父元素，设置writing-mode样式为垂直排列
• 对居中元素，取消继承writing-mode样式

1. 实例：

writing-mode

2. 缺点：

• 可能影响其他与居中无关的样式