摘要:不定宽块状元素水平居中垂直居中利用属性垂直居中垂直居中利用布局不定高不定宽垂直居中垂直居中设置或另外设置为垂直居中或上下居中左右居中居中
CSS水平居中和垂直居中 行内元素居中 水平居中
1.给父元素设置text-align:center
行内元素span居中
2.flex布局
设置父元素display:flex;justify-content:center;
垂直居中行内元素span居中
1.父元素高度确定的单行文本(行内元素),可设置line-height等于父元素高度
坦克
2.父元素高度确定的多行文本(行内元素)
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle( td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。)
父元素高度确定的多行文本
看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 看我是否可以居中。 |
|
方法二:设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性
块级元素居中 水平居中坦克
航母
1.定宽块状元素,设置左右margin值为auto
坦克
航母
2.不定宽块状元素方法
方法一:加入table标签,table标签长度自适应性,即不定义其长度也不默认父元素body的长度(其长度根据其内文本长度决定),可以看做一个定宽的元素,然后利用定宽块状居中的margin方法,使其水平居中
坦克 航母 |
方法二:改变块级元素的 display 为 inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果
不定宽块状元素水平居中