百度前端学习日记09——CSS水平垂直居中

前言

参考博客

正文

1.水平居中

a.行级元素

给父元素设置text-align

b.块级元素

1.给子元素设置display:inline-block，给父元素设置text-align

2.给子元素设置margin: auto（定宽，PS：块级元素在不设定宽度的情况会占满全行）

2.垂直居中

a.行级元素

1.给子元素设置line-height:父元素高度（父元素定高）

b.块级元素

1.给父元素设置display:table-cell;vertical-align:middle（子元素不定高）

3.在元素有具体数值的情况下，可以通过盒模型的margin和padding或绝对定位absolute和相对定位relative来调整达到水平垂直居中