html calc语言,html – div中的文本和calc()怀疑

如何将文本(p)在div(.item)内垂直和水平居中？

.wrapper {

width: auto;

height: 10em;

background-color: red;

position: relative;

}

.item {

width: 4em;

height: 4em;

background-color: black;

position: absolute;

display: inline-block;

color: white;

}

.item p {

text-align: center;

vertical-align: middle;

}

#top-right {

right: 0em;

}

#center {

top: calc(50% - 2em);

right: calc(50% - 2em);

}

#bottom-left {

bottom: 0em;

left: 0em;

}

#bottom-right {

right: 0em;

bottom: 0em;

}

Top Left

Top Right

Center

Bottom Left

Bottom Right

可以使用calc(因为我读到某些浏览器不支持此功能)？或者还有另一种方法可以在没有calc()的div中将元素#center居中？