css圆形里面放名字 |手机端响应式css

下面是一个基本的CSS样式，将一个div元素设置为一个圆形：

div {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #f00;
}

按照以上样式设置后，就会出现一个红色的圆形。如果要在圆形里面放置名字，就需要在圆形内部加入一个容器，然后设置容器里面的文本样式。

例如下面这个代码段，在一个圆形div内，添加一个span容器，将名字放置在容器内，并设置文字样式，就可以实现在圆形里面放名字的效果了：

Alice
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
}
.name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 16px;
}

以上代码中，给圆形div添加了position: relative属性，使得容器的position属性值可以相对于它定位。在容器中，设置了position: absolute属性，使得span元素能够完全脱离文档流，并使用top、left、transform属性将文字居中显示。

可以根据实际需要调整容器的大小、颜色、文字大小等样式来实现不同的效果。