[笔记] CSS 上常见的水平置中 & 垂直置中方法

章节连结

CSS 常见的老问题之一的对齐问题,这边笔记一下目前自己常用以及网络上流传的各种置中方法,分为水平和垂直两块。
css3 logo


基础知识

HTML 的元素有默认的 display 属性,这点要先清楚,才能避免一些麻烦。完整版的文件可以看这边。

  1. inline: <span>, <a>, <input> ……等:默认为不换行,由内容大小决定宽度,无法设定 width, height, margin 和 bottom
  2. block: <div>, <nav>, <section>, <nav> ……等:默认为占满父元素 100%
  3. inline-block: 结合上述两者,外层 inline 里层 block,可以多个并排。当你的 <div> 想要横向排列,这就是一个可用的方式。

水平置中排列

inline 元素

在父元素下宣告 text-align,里头的 inline 元素就会自动套用。

block 元素

在元素本身上运用 margin 属性,语法为 margin: 0px auto,会依照左右宽度自行缩放。

inline-block 元素

依照 inline 元素来套用即可。请小心,float:left 系列的语法,要搭配 clear:both 之类的语法来避免高度塌陷的问题。

DEMO


垂直置中排列

传统方式

  1. Line-height+单行文字:运用设定文字行高,会在其正中央位置
  2. Line-height+多行文字:同上概念,被要垂直置中的元素用 div 包起来,并设置 inline-block & vertical-align
  3. 运用 :before + inline-block:将伪元素和要对齐的子元素皆设定为 inline-block,就可以用 vertical-align 了
  4. Absolute + margin 负值(调整位置用)
  5. Absolute + translate:绝对位置 + 百分比调整

Flex 系列

  1. 两层 div 包夹,父层下 display:flex、align-items: center。
  2. 两层 div 包夹,父层下 display:flex,子层下 margin:auto 0。
  3. 两层 div 包夹,父层下 display:flex,子层下 align-self: center。

Display:table-cell

将 div 设定为表格的 td,那么你就可以用储存格垂直对齐的 vertical-align:middle。

DEMO


参考资料

  1. CSS垂直置中技巧,我只会23个,你会几个
  2. [CSS] 水平置中与垂直置中(传统作法)
按赞加入粉丝团

延伸阅读