水平居中设置-行内元素
- 如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置
text-align:center
来实现的。
水平居中设置-定宽块状元素
- 满足定宽和块状两个条件的元素是可以通过设置
左右margin
值为auto
来实现居中的。
水平居中总结-不定宽块状元素方法
{
display:table;
margin:0 auto;
}
- 改变块级元素的
display
为inline
类型(设置为行内元素
显示),然后使用text-align:center
来实现居中效果
- 通过给父元素设置
float
,然后给父元素设置position:relative
和left:50%
,子元素设置 position:relative
和left: -50%
来实现水平居中。
垂直居中-父元素高度确定的单行文本
- 通过设置父元素的
height
和line-height
高度一致来实现的。(height
: 该元素的高度,line-height
: 顾名思义,行高(行间距),指在文本中,行与行之间的基线间的距离 )。
垂直居中-父元素高度确定的多行文本
- 使用插入
table
(包括tbody、tr、td
)标签,同时设置 vertical-align:middle
。
- 或者采用以下样式
{
display:table-cell;
vertical-align:middle;
}
隐性改变display类型
position : absolute
float : left 或 float:right
- 只要
html
代码中出现以上两句之一,元素的display
显示类型就会自动变为以 display:inline-block
(块状元素)的方式显示,当然就可以设置元素的 width
和 height
了,且默认宽度不占满父元素。