CSS盒子水平居中

来源:互联网 发布:文件管理程序软件 编辑:程序博客网 时间:2024/06/06 14:29
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.big{width: 700px;height: 400px;margin: 100px auto;background-color: pink;position: relative;}.small{width: 100px;height: 30px;background-color: black;position: absolute;left: 50%;}</style></head><body><div class="big"><div class="small"></div></div></body></html>



此时小黑盒子的左边框居中,要让整体居中,还得加上  margin-left:负的小黑盒子width的一半;margin-left: -50px;之后就是水平居中了,竖直方向同理


外边距margin取负数,大小为width/height的一半,再加上top: 50%; left: 50%,就可以水平垂直居中了。