效果预览
水平垂直居中
p.parent { display: flex; justify-content: center; /*主轴对齐方式*/ align-items: center; /*交叉轴上如何对齐*/ background: #ededed; width: 800px; height: 400px; } p.child { background: green; }
预览地址
水平垂直居中
p.parent { position: relative; width: 800px; height: 300px; background: #ededed; } p.child { background: green; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
效果预览
水平垂直居中
p.parent { display: table-cell; text-align: center; vertical-align: middle; background: #ededed; width: 300px; height: 300px; } p.child { vertical-align: center; display: inline-block; background: green; }
如对本文有疑问, 点击进行留言回复!!
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
网友评论