一、div中img水平居中:
{
display:table;
margin:0 auto;
}
二、img与span水平对齐:
{
display: flex;
align-items:center;
}
三、div中div水平居中(不知宽度&设置position:absolute情况下):
{
position:absolute;
left:50%;
transform:translateX(-50%);
}
四、div中span垂直居中:
{
vertical-align: middle;
}
五、Flex弹性盒子:用flex实现垂直居中(父元素body,子元素main)
body{
display:flex;
align-items:center;
}
main{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
六、position:absolute 绝对定位:实现整体居中(已知宽高度情况下)
main {
position: absolute;
width: 18em;
height: 10em;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -5em;
{
display:table;
margin:0 auto;
}
二、img与span水平对齐:
{
display: flex;
align-items:center;
}
三、div中div水平居中(不知宽度&设置position:absolute情况下):
{
position:absolute;
left:50%;
transform:translateX(-50%);
}
四、div中span垂直居中:
{
vertical-align: middle;
}
五、Flex弹性盒子:用flex实现垂直居中(父元素body,子元素main)
body{
display:flex;
align-items:center;
}
main{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
六、position:absolute 绝对定位:实现整体居中(已知宽高度情况下)
main {
position: absolute;
width: 18em;
height: 10em;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -5em;
}