父元素
.father{ position: relative; width: 400px; height: 400px; background: blue; /*在此处添加相应代码*/ }
子元素
.child{ position: absolute; width: 100px; height: 100px; .lrtb(); background: red; }
情况1:子元素水平居中,.lrtb设置左右为0,margin : 0 atuo;
.lrtb(){ left: 0; right: 0; margin: 0 auto; }
情况2 :子元素垂直居中 .lrtb 设置上下位0 ,margin : auto 0 ;
.lrtb(){ top:0; bottom: 0; margin: auto 0; }
情况3: 子元素垂直水平居中,结合情况1,2,margin : auto
.lrtb(){ left: 0; right: 0; top:0; bottom: 0; margin: auto; }注意!要使居中生效,子元素必须要设置高或宽