前端面试题——让div自适应水平垂直居中

今天做某企业的前端笔试时，遇到的一道题目，让把一个div元素水平垂直居中，div的宽高自适应，所有内边距均为50px。相应的HTML和CSS代码如下。

HTML

<div id="a">
水平垂直居中的元素
</div>

CSS

<style>
#a {
    background-color: red; //为了方便查看效果，可不写
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 50px;
    width: auto;
    height: auto;
    transform: translate(-50%,-50%);
}
</style>

• 当给div的position设置为absolute后，该div会脱离文档流，并相对于距离其最近的一个定位锚点进行定位
• top和left设置为50%，表示div的左上角在锚点正中央
• 此时只是div左上角的顶点在水平垂直居中的位置，还需要将div向左和向上移动自身宽高的一半，这个通过transform属性来实现