元素居中（一篇就够用）

元素居中

1、第一种办法

/* 
Position:absolute;( 减号两要有空格)
水平居中：left:calc(50%-50px)
垂直居中：top:calc(50%-50px)
border<div></div> 
*/
div {
    width: 100px;
    height: 100px;
    border: 1px solid gray;
    position: absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    border-radius: 10px 20px 30px 40px;
}

2、第二种办法

/* -水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性 */
div {
    width: 200px;
    margin: 0 auto;
}

3、第三种办法

/* -水平居中，利用 text-align:center 实现 */
.container {
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 0;
}
.box {
    display: inline-block;
    width: 500px;
    height: 400px;
    background-color: pink;
}

4、第四种办法

/* -让绝对定位的 div 居中 */
div {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: pink; /*方便看效果*/
}

5、第五种办法
-水平垂直居中一

/*
    1、你父级没有定位时，相对于浏览器定位居中
    2、相对于最近有定位的父级(position: relative/absolute)定位居中
*/
/*确定要定位的容器的宽高宽500高300的层设置层的外边距*/
div {
    position: absolute; /*绝对定位*/
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px; /*外边距为自身宽高的一半*/
    background-color: pink; /*方便看效果*/
}

6、第六种办法
-水平垂直居中二

/*
    1、你父级没有定位时，相对于浏览器定位居中
    2、相对于最近有定位的父级(position: relative/absolute)定位居中
*/

/*未知容器的宽高，利用`transform`属性*/
div {
    position: absolute; /*相对定位或绝对定位均可*/
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink; /*方便看效果*/
}

7、第七种办法
-水平垂直居中三

/*利用flex布局实际使用时应考虑兼容性*/
.container {
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
}
.containerdiv {
    width: 100px;
    height: 100px;
    background-color: pink; /*方便看效果*/
}

8、第八种办法
-水平垂直居中四

/*利用text-align:center和vertical-align:middle属性*/
.container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}

.container::after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.box {
    display: inline-block;
    width: 500px;
    height: 400px;
    background-color: pink;
    white-space: normal;
    vertical-align: middle;
}