1.在css中让块级元素居中的方法有很多种,我先记录第一种方法,具体步骤如下:
(1)给父元素添加绝对定位relative,如果不添加定位,那么块级子元素会在body中垂直居中
position: relative;
(2)给子元素添加相对定位absolute,并且让子元素距离父元素左边和顶部50%的距离,令left:50%;top:50%,此时子元素在父元素的位置是偏右下的
position: absolute;
left: 50%;
top: 50%;
(3)在子元素中添加css3中的transform属性让子元素分别向上和向左移动半个子元素的宽度transform:translate(-15,-10)
transform: translate(-15px,-10px);
2.用margin:auto
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>怎么让块级元素居中</title> <style> .box{ width: 200px; height: 200px; background-color: #ff0; position: relative; } .cbox{ width: 50px; height: 50px; background-color: #f00; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="box"> <div class="cbox"></div> </div> </body> </html>