css常用对齐方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div { margin-top: 0.25rem; margin-bottom: 0.25rem; } /* 使用margin属性居中 */ .margin-center { margin: auto; width: 50%; border: 1px solid green; padding: 20px; } /* 文本居中 */ .text-center { text-align: center; border: 1px solid green; } /* 图片居中 */ img { display: block; margin-left: auto; margin-right: auto; width: 100px; } /* 绝对定位居右 */ .position-right { position: absolute; right: 0px; width: 300px; border: 1px solid green; padding: 20px; } /* 浮动居右 */ .clearfix { overflow: auto; } .float-right { float: right; width: 300px; border: 1px solid green; padding: 10px; } /* 使用padding属性垂直居中对齐 */ .padding-vcenter { padding: 30px 0; border: 1px solid green; text-align: center; } /* 使用line-height属性垂直居中对齐 */ .lineheight-vcenter { height: 100px; line-height: 100px; border: 1px solid green; text-align: center; } /* 使用transform属性居中对齐 */ .transform-center { height: 200px; position: relative; border: 1px solid green; } .transform-center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 使用flex布局直居中对齐 */ .flex-center { display: flex; justify-content: center; align-items: center; height: 50px; border: 1px solid green; } </style> </head> <body> <div class="margin-center">div 元素居中</div> <div class="text-center">text居中</div> <img src="https://www.w3school.com.cn/i/logo/w3logo-1.png" alt="" /> <div class="clearfix"> <div class="float-right">div 元素右对齐</div> </div> <div class="padding-vcenter">垂直居中</div> <div class="lineheight-vcenter">垂直居中</div> <div class="transform-center" style="height: 150px"> <p>居中<br />居中</p> </div> <div class="flex-center">居中</div> <div class="position-right">div 元素右对齐</div> </body> </html>