CSS居中

居中布局在平时的页面开发中十分常见，今个周日，特来总结一番，以备日后更加灵活的使用各种居中的方式。
首先准备元素：

<div class="parent">
       <div class="child"></div>
</div>

1、水平居中

1）、margin:0 auto+设置width

.parent{width: 300px;height: 300px;border: 1px solid #ccc;}
 .child{
         width: 100px;height: 100px;background-color: red; 
         margin: 0 auto;
 }

2）text-align:center，inline、inline-block元素有效
在父元素上设置。
**3）inline-block实现水平居中

.parent{
            width: 200px;height: 200px;border: 1px solid red;
            text-align: center;font-style: 0;letter-spacing: -4px;word-spacing: -4px;
}
.child{
    width: 100px;height: 100px;background-color: red; 
     display: inline-block;letter-spacing: normal;word-spacing:normal;font-size: 14px; 
}

2、绝对居中（即水平垂直都居中）

1）绝对定位+负margin值
需要设置元素的width、height

.parent{
       position: relative;
       width: 300px;height: 300px;border: 1px solid #ccc;
}
.child{
     width: 100px;height: 100px;background-color: red;
     position:absolute;top: 50%;left:50%;
     margin: -50px 0 0 -50px;
}

image.png
2）绝对定位+margin:auto

.parent{
      position: relative;
      width: 300px;height: 300px;border: 1px solid #ccc;
}
.child{
       width: 100px;height: 100px;background-color: red;
       position:absolute;top: 0;bottom: 0;left:0;right: 0;
       margin: auto;
}

3)绝对定位和transfrom
感觉bigger很高，下次我要使用看看效果如何

.parent{
       position: relative;
       width: 300px;height: 300px;border: 1px solid #ccc;
}
.child{
     width: 100px;height: 100px;background-color: red;
     position:absolute;top: 50%;left:50%;
    transform: translate(-50%,-50%);
}

暂时经常用到的都写了，当然关于居中还有各种各样的奇淫巧技，日后有需要再补咯。
4）使用flex布局居中的方式

display:flex;
justify-content:center;
align-items:center;