position:fixed定位的元素，如何实现绝对居中，并且宽度自适应内容的宽度

Question

一个div,position:fixed,现在需要它绝对居中,并且宽度会自适应div中内容的宽度

Answer 1

.demo {
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

更多：CSS布局奇淫技巧之--各种居中

Answer 2

元素使用绝对定位居中后宽度无法超过50%，可以使用width: fit-content;让元素的宽度自适应内容，再加上box-sizing: content-box;后可以兼容ios的手机端。

.demo {
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    box-sizing: content-box;
}