子元素为行内元素还是块状元素,宽度一定还是宽度未定,采取的布局方案不同。下面进行分析:
- 行内元素:对父元素设置
text-align:center;
- 定宽块状元素: 设置左右
margin
值为auto;
- 不定宽块状元素: 设置子元素为
display:inline
, 然后在父元素上设置text-align:center;
- 通用方案: flex布局,对父元素设置
display:flex;justify-content:center;
垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案是不同的。
- 父元素一定,子元素为单行内联文本:设置父元素的
height
等于行高line-height
- 父元素一定,子元素为多行内联文本:设置父元素的
display:table-cell
或inline-block
,再设置vertical-align:middle;
- 块状元素:设置子元素
position:fixed(absolute)
,然后设置margin:auto;
- 通用方案: flex布局,给父元素设置
{display:flex; align-items:center;}
。