css盒子居中设置 |css3 环形文字

// CSS代码
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上述代码是使用CSS的绝对定位和transform属性实现盒子居中。position: absolute属性将盒子置于父元素的相对位置中，实现了水平方向的居中布局；top: 50%; left: 50%属性将盒子的左上角移动到父元素的中心，实现了垂直方向的居中布局；最后，transform: translate(-50%, -50%);属性将盒子向左上方平移自身宽高的一半，让盒子的中心点完美地对齐父元素的中心点。这样就实现了盒子的居中布局。

// CSS代码
.box {
display: flex;
justify-content: center;
align-items: center;
}

上述代码则使用了CSS的flex布局实现盒子居中。使用display: flex;属性将盒子的display属性设置为flex，则盒子内的子元素将可以使用flex属性排列；使用justify-content: center;属性将盒子内子元素沿父元素的主轴居中对齐；使用align-items: center;属性将盒子内子元素沿父元素的交叉轴居中对齐。这样就实现了盒子的居中布局。

总结起来，通过这两种方法可以实现盒子的居中布局，使用flex布局可以比绝对定位更加灵活地控制盒子内子元素的布局，而使用绝对定位则可以在子元素的高度不明确的情况下仍然实现盒子的居中布局。