Html 把div放在中间而不是实数的聪明方法？

子div可以放在中间，边距为实数

div.father{
高度：330px；
宽度：330px；
边框：1px纯黑；
}
教子{
利润率：114px 114px 114px 114px；
边框：1px纯黑；
高度：100px；
宽度：100px；
}

---

实现这一点的一种方法是设置父

显示：表格单元格；垂直对齐：中间对齐和子
页边距：自动


div.father{
高度：330px；
宽度：330px；
边框：1px纯黑；
显示：表格单元格；
垂直对齐：中间对齐；
}
教子{
保证金：自动；
边框：1px纯黑；
高度：100px；
宽度：100px；
}
如果.son div的宽度和高度保持不变，则下面的代码适用于您


div.father{
高度：330px；
宽度：330px；
边框：1px纯黑；
位置：相对位置；
}
教子{
位置：绝对位置；
边框：1px纯黑；
高度：100px；
宽度：100px；
最高：50%；
左：50%；
利润率：-50px0-50px；
}
flexbox
模块似乎是这项任务的智能和现代候选者

justify content
沿主轴（水平方向）对齐项目，
align items
沿横轴（垂直方向）对齐项目

和（IE10+）
根据具体要求，有多种方法实现对中

一个例子是绝对定位子对象（相对定位父对象），将“边距”设置为“自动”，将每侧的距离设置为0


div.father{
边框：1px纯黑；
高度：330px；
位置：相对位置；
宽度：330px；
}
教子{
边框：1px纯黑；
底部：0；
高度：100px；
左：0；
保证金：自动；
位置：绝对位置；
右：0；
排名：0；
宽度：100px；
}


div.father {
    height: 330px;
    width: 330px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
}

div.son {
    border: 1px solid black;
    height: 100px;
    width: 100px;
}