[分享]css内容水平居中且位置不变

在网页设计中，将元素水平居中是常见的需求。下面介绍一种方法，可以让内容水平居中，且元素位置不变。

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

以上样式代码使用了flex布局中的属性，具体解释如下：

• display: flex; 设置元素为弹性盒子
• justify-content: center; 沿着弹性盒子的主轴居中对齐

在html中，只需给需要居中的元素添加.center类即可：

 <div class="center">
        <p>这里是居中的内容</p>
    </div> 

由于使用了flex布局，可以保证元素在不同尺寸的屏幕下都能保持居中效果，并且不影响元素本身的位置。这个方法适用于大部分元素，包括文本、图片、表格等。