子元素在父元素中垂直、水平居中——四种方法

对父元素定位

• 1-父子元素进行定位，对子元素绝对定位，子元素margin:auto;top:0;left:0;bottom:0;right:0;  （定位布局）

• 2-对父元素定位，对子元素绝对定位，子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度   （百分比布局）

 

---

设置父元素的dispaly方式

• 3-父元素 display:table-cell; vertical-align:middle; 子元素变成一个内联元素display:inline-block

• 4-父元素 display:flex; justify-content:center align-items:center，子元素自动居中  （伸缩盒布局）

 

 

                           -----------本文完-----------