详解实现元素的水平垂直居中的n种方式
1。flex
在父元素设置如下属性:
display:flex;
justifycontent:center;
alignitems:center;2。grid
在父元素设置如下属性:
display:grid;
justifycontent:center;
alignitems:center;3。tablecell
在父元素设置如下属性:
display:tablecell;
verticalalign:middle;
在子元素设置如下属性:
width:100px;
margin:0auto;4。position偏移剩余宽高的一半;
在父元素设置如下属性:
position:relative;
在子元素设置如下属性:
position:absolute;
top:200px;
left:200px;5。positionmargin:auto;
在父元素设置如下属性:
position:relative;
在子元素设置如下属性:
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;6。positionmargin:负值;
在父元素设置如下属性:
position:relative;
在子元素设置如下属性:
position:absolute;
top:50;
left:50;
margintop:50px;
marginleft:50px;7。positiontranslate;
在父元素设置如下属性:
position:relative;
在子元素设置如下属性:
position:absolute;
top:50;
left:50;
transform:translate(50,50);