css 内部元素居中 |css

.center{
display: flex;
justify-content: center;
align-items: center;
}

上述代码展示了如何使用 CSS 中的 flex 属性来实现内部元素居中显示。其中，display 属性设置为 flex，表示将元素转换为弹性盒子。而 justify-content 和 align-items 则可以分别实现在水平和垂直方向上居中。

除了使用 flex，大家还可以使用 position 和 transform 属性来实现内部元素居中。

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

以上代码实现了使用 position 和 transform 属性来实现内部元素居中。其中，position 属性设置为 absolute，表示将元素设置为绝对定位。而 top 和 left 则用于设置元素距离顶部和左侧的距离。最后，transform 属性设置为 translate(-50%, -50%)，表示将元素向上和向左移动自身宽度和高度的一半，从而实现了内部元素居中。

通过这些方法，大家可以轻松实现内部元素居中的效果，为网页设计增加更多的美观和易用性。