如何水平居中一个元素
1. text-align-:ceter 可以为文本水平居中
2.magin:0 auto; 块级元素设置宽度后,设置magin:auto:0;可使区域块居中;
3.position:absolute + margin-left:-容器一半宽度。
width:800px; //一定要设置宽度
Position:absolute;
Left:50%;
Margin-left: - 400px //此为负值
4. position: absolute;
margin: 0 auto;
left: 0;
right:0;
width:400px; //一定要设置宽度
5.transform 例如:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>居中</title> <style type="text/css"> .container { height: 200px; background-color: #ccc; position: relative; } .center-p { background-color: yellow; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); } </style> </head> <body> <div class="container"> <div class="center-p"> table-cell居中 </div> </div> </body> </html> 作者:凌Linny 链接:https://www.jianshu.com/p/d00d32f9cb7a 來源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。