CSS3 元素居中总结

块级盒子水平居中

在盒子已经指定宽度的情况下

margin: 0 auto;

行内元素或行内块元素水平居中

给父元素添加text-align: center

绝对定位的盒子水平居中和垂直居中

加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中

• ①：left: 50%; 让盒子的左侧移动到父级元素的水平中心位置
• ②：margin-left: -150px; 让盒子向左移动自身宽度的一半

 div{
              position: absolute;
              width: 300px;
              height: 300px;
              background-color: pink;
              left: 50%;
              margin-left: -150px;//可替换transform:translateX(-50%);
              top: 50%;
              margin-top: -150px;//可替换transform:translateY(-50%);
          }

定位的元素和浮动的元素的特性

• 行内元素定位或者浮动以后可以设置高度和宽度。
• 块级元素定位或者浮动以后默认大小为内容大小。