CSS3实现水平中心，垂直中心，水平垂直中心实例代码

　　作为前端猴子，无论何时进行面试或工作，我们都会或多或少地遇到使用CSS居中的效果。今天，我将写一篇关于CSS垂直和水平居中方法的文章。例子1：从最简单的水平中心开始
　　margin：0auto；
　　块级元素使用边距：0Auto；在父元素中间居中，但请记住要设置块级元素的宽度和高度。HTML部分pCSS
　　CSS部分。example1｛width：200px；height：200px；backgroundcolor：orange；｝。example1p｛width：100px；height：100px；backgroundcolor：red；margin：0auto；lineheight：100px；textalign：center；｝
　　例子2：元素水平和垂直中心
　　位置元素已知宽度绝对定位边距反向偏移。wrap｛position：relative；backgroundcolor：orange；width：300px；height：300px；｝。example2｛backgroundcolor：red；width：100px；height：100px；position：absolute；left：50；top：50；margin：50px0050px；｝
　　如果元素未知宽度，则对变换元素未知宽度进行定位，只需替换空白：50px0050px；在上面的example2中，具有：转换：转换（50，50）；
　　例子3：弹性布局
　　与上述HTML相同，并附加了CSS代码。warp｛backgroundcolor：FF8C00；width：200px；height：200px；display：flex；Justifycontent：Center；centersubitemshorizontallyAlignitems：Center；centersubitemsvertically｝。example3｛backgroundcolor：F00；width：100px；height：100px；｝
　　另一个是表格单元格布局，因为我不想介绍，所以我不会介绍它。例子4：绝对布局
　　使用绝对布局的Div，设置margin：auto；并将top，left，right和bottom的值设置为相等，但并非所有值都必须为0。HTML部分Centerdisplay
　　CSS部分。warp｛position：relative；backgroundcolor：orange；width：200px；height：200px；｝。example3｛position：absolute；top：0；left：0；right：0；bottom：0；backgroundcolor：red；width：100px；height：100px；margin：auto；｝
　　例子5：子元素的相对位置，垂直中心通过translay（）获得。warp｛position：relative；backgroundcolor：orange；width：200px；height：200px；｝。example3｛position：relative；top：50；transform：translateY（50）；backgroundcolor：red；width：100px；height：100px；margin：0auto；｝
　　例子6：使用垂直对齐：内联块的中间在伪元素之后对齐
　　使用内联块垂直对齐：中间伪元素之后的对齐效果更好。中间块的大小可用于包装和自适应内容，并且兼容性非常好。缺点是水平中心需要考虑内联块间隔中的空白。warp｛textalign：center；overflow：auto；width：200px；height：200px；backgroundcolor：orange；｝。example3｛display：inlineblock；backgroundcolor：red；verticalalign：middle；width：100px；height：100px；｝。warp：after｛content：；display：inlineblock；verticalalign：middle；height：100；marginleft：0。25em；Tooffsetspacing。Mayvarybyfont｝例子7：显示：弹性盒
　　Flexbox布局。这是布局的终极方法，专门解决各种布局定位问题！优点：可以解决各种布局问题。warp｛display：webkitflex；display：mozbox；display：msflexbox；display：webkitbox；display：flex；webkitboxalign：center；mozboxalign：center；msflexalign：center；webkitalignitems：center；alignitems：center；webkitboxpack：center；mozboxpack：center；msflexpack：center；webkitjustifycontent：center；justifycontent：center；width：200px；height：200px；backgroundcolor：orange；｝。example3｛width：100px；height：100px；backgroundcolor：red；｝
　　图片中间的例子1：imgsrcc2021imgdataimg。jpgdatasrcimg05。71396。combanu759d46a8de58f63a。jpgalt。warp｛width：200px；height：200px；backgroundcolor：orange；display：flex；alignitems：center；justifycontent：center；｝。example3img｛width：100px；height：100px；backgroundcolor：blue；｝
　　总结
　　本文介绍CSS3的示例代码，以实现水平中心，垂直中心和水平垂直中心。如果喜欢就点个关注点个赞吧，谢谢。