下面介绍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种方法都可以实现元素在父容器中的居中对齐，具体使用哪一种方法取决于具体的场景和需求。