如何让子元素在父元素中垂直水平居中
1.已知子元素的高度和宽度
设置子元素为绝对定位,left为50%,top为50%
为父元素开启定位,是父元素为子元素的包含块,开启后子元素的left和top就参照于父元素的width和height(否则子元素的left和top就参照于包含块HTML的width和height移动)
margin-top为-50px,margin-left为-50px
2. 已知子元素的高度和宽度
* 绝对定位盒模型;
* 子元素的left+width+margin+padding+right=父元素的content的width
* 0 100 auto 0 0 300
* 子元素的top+height+margin+padding+bottom=父元素的content的height
* 0 100 auto 0 0 300
具体做法:
#inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: deeppink;
}