chatGPT 帮我总结的css左右+垂直居中方法

下面介绍5种css使元素上下左右居中的方法； 这5种方法的父元素parent和子元素child的基本公共样式如下： 其中父元素和子元素的宽高可任意修改，后面的样式不依赖宽高；

.parent {
    width: 100%;
    height: 400px;
    background: #eee;
}

.child {
    background: #000;
    width: 200px;
    height: 200px;
}

1. 使用display:inline-block和text-align

这种方法是使用display:inline-block属性将元素改变为内联块元素，再结合text-align属性将父容器左右居中；再利用translateY上下居中。

.parent {
    text-align: center;
}

.child {
    display: inline-block;
    transform: translateY(50%)
}

2. 使用display:flex和margin:auto

这种方法是通过使用flexbox布局，将父容器设置为弹性容器，然后使用margin:auto属性将元素居中对齐。

.parent {
    display: flex;
}

.child {
    margin: auto;
} 

3. 使用display:flex,justify-content,align-items

这种方法是通过使用align-self属性定义元素在弹性容器中垂直居中对齐，并且将justify-content属性设置为center实现水平居中对齐。

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

4. 使用父元素position: relative 和子元素position: absolute

这种方法是通过将子元素的top、bottom、left、right;都设为0；并在其上使用margin:auto属性将元素居中对齐。

 .parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

5. 使用calc()、position、transform 相结合

这种方法是通过使用calc()函数计算出top和left的值以及使用position属性将元素定位到居中位置。其中top、left的50%是相对于父元素；而translate的50%是相对于子元素

.parent {
    position: relative;
}

.child {
    position: absolute;
    transform: translate(-50%, -50%);
    left: calc(50%);
    top: calc(50%);
}

以上5种方法都可以实现元素在父容器中的居中对齐，具体使用哪一种方法取决于具体的场景和需求。