1 .水平居中文本-对齐：中心； 如果没有浮动，则将需要位于中心的块级元素设置为inline/inline-block，并为其父元素设置文本链接：中心； 很好。 如果要集中的块级元素是内嵌元素(例如，span、img、a等)，请直接将文本-中心放在父元素上； 很好。
. father{ width: 200px； height: 200px； background-color: aqua； 文本照明3360中心； } .son{ width: 100px； height: 100px； background-color: brown； 显示：在线块； } divclass=' father ' divclass=' son '/div/div
边距： 0自动使用； 水平方向中央
中间的元素必须是块级别。 对于内嵌元素，显示： block； 然后元素不会漂浮。
. father{ width: 200px； height: 200px； background-color: aqua； } .son{ width: 100px； height: 100px； background-color: brown； 边距： 0自动； } divclass=' father ' divclass=' son '/div/div
3 .定位应为水平、垂直中央(需要计算偏移值) ) )。
你需要知道中央元素的宽度和高度
. father{ width: 200px； height: 200px； background-color: aqua； 定位：关系； }.son{ width: 100px； height: 100px； background-color: brown； 定位：助手； left: 50%； top:50%； 边距左边缘：-50px； 边距-顶部：-50px； } divclass=' father ' divclass=' son '/div/div
4 .定位实现中央(不需要计算偏移值) ) ) )。
边距：自动； 因为与4个方向的对位组合使用，所以不需要知道元素的宽度和高度
. father{ width: 200px； height: 200px； background-color: aqua； 定位：关系； }.son{ width: 100px； height: 100px； background-color: brown； 定位：助手； top: 0； bottom: 0； left: 0； right: 0； 边距：自动； } divclass=' father ' divclass=' son '/div/div
5 .定位结合css3新属性transform:translate(x，y )使用
不需要知道元素的宽度和高度，多用于移动端。 因为移动端对css3的新属性具有很高的兼容性。
. father{ width: 200px； height: 200px； background-color: aqua； 定位：关系； }.son{ width: 100px； height: 100px； background-color: brown； 定位：助手； top:50%； left: 50%； transform:translate(-50%、-50%； } divclass=' father ' divclass=' son '/div/div
6.css3新属性calc ()与定位并用) )需要知道元素的宽度和高度) ) )。
用于动态计算长度值。
请注意运算符前后都需要保留一个空格，例如width:calc(100%-10px )；
长度值可以使用calc (函数计算。
calc ) )函数支持'、'-'、' * '、'/'运算。
calc ) )函数使用标准数学运算优先级规则；
. father{ width: 200px； height: 200px； background-color: aqua； 定位：关系； }.son{ width: 100px； height: 100px； background-color: brown； 定位：助手； left:calc(50%-50px )； top:calc(50%-50px； } divclass=' father ' divclass=' son '/div/div
使用flex弹性盒布局实现水平垂直居中
您不需要知道元素本身的宽度和元素的属性
. father{ width: 200px； height: 200px； background-color: aqua； display :闪存； 内容：中心； align-items3360中心； }.son{ width: 100px； height: 100px； background-color: brown； } divclass=' father ' divclass=' son '/div/div