Skip to content

Instantly share code, notes, and snippets.

@JeOam
Created September 14, 2017 08:35
Show Gist options
  • Save JeOam/a7bae652cbd163d0a945b336bb34a951 to your computer and use it in GitHub Desktop.
Save JeOam/a7bae652cbd163d0a945b336bb34a951 to your computer and use it in GitHub Desktop.
CSS Notes

水平居中

子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。下面进行分析:

  • 行内元素:对父元素设置 text-align:center;
  • 定宽块状元素: 设置左右 margin 值为 auto;
  • 不定宽块状元素: 设置子元素为 display:inline, 然后在父元素上设置 text-align:center;
  • 通用方案: flex布局,对父元素设置 display:flex;justify-content:center;

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。

  • 父元素一定,子元素为单行内联文本:设置父元素的 height 等于行高 line-height
  • 父元素一定,子元素为多行内联文本:设置父元素的 display:table-cellinline-block,再设置 vertical-align:middle;
  • 块状元素:设置子元素 position:fixed(absolute),然后设置 margin:auto;
  • 通用方案: flex布局,给父元素设置 {display:flex; align-items:center;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment