css中margin的居中应用

标签：

1、不固定宽高的fixed框，水平垂直居中

.tab{
position: fixed;
width: 302px;
border: 1px solid #cccccc;
border-radius: 5px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0 auto;
box-sizing:border-box;
z-index: 9999;
}

这里宽是固定的，但是高没有固定。所以使用margin:auto;无法满足水平垂直居中的条件。这里应用 left:50%;top:50%;transform:translate(-50%,-50%);来解决，即首先偏移整体的一半，然后自身反向移动一半。

2、表单元素的水平居中

<button>确定</button>

button的属性是display:inline-block;想在margin:0 auto;的情况下满足水平居中，需要改变属性值;display:block;

margin满足的是有具体宽高的块级元素。

css中margin的居中应用

标签：

原文地址：http://www.cnblogs.com/picap00n/p/picacoo_003.html