(1)第一种办法:应用相对定位+外边距(设置position为相对定位absolute,给left和top别离设置为父级元素的50%,设置上外边距和左外边距为别离为本身高度和宽度的一半,且为负值)
position:absolute;
left:50%;
top:50%;
margin-top:-height/2px;
margin-left:-width/2px;
(2)第二种办法:也是应用相对定位+外边距(设置position为相对定位absolute,给left、right、top、bottom都设置为零;设置外边距为auto主动适应)
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
(3)第三种办法:dispaly:inline-block与vertical-align:middle 配合来父元素的text-align:center;
父:
text-align:center;
子:
display:inline-block
vertical-align:middle
display属性详情
vertical-align属性详情
(4)第四种办法:应用相对定位+平移(设置position为相对定位absolute,给left和top别离设置为父级元素的50%,设置X轴平移和Y轴平移间隔为别离为本身高度和宽度的一半,且为负值)
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%);
transform:translateY(-50%);
什么是transform?
(5)第五种办法:这种办法是应用flex布局,在元素css中申明为flex;
display:flex;
justify-content:center;
align-items:center;
什么是flex布局?
加油!!!
发表回复