css中怎样设置网页居中显示

CSS中如何设置网页居中显示？这是我们网页设计中需要经常掌握的基本技能之一。下面我们来探讨几种方法。

/*方法一：使用margin*/
div{
    width: 800px;
    height: 600px;
    margin: 0 auto;
}

使用这个方法前提是需要设置页面内容的宽度，然后将左右的margin值都设置为auto即可实现水平居中显示。

/*方法二：使用flex布局*/
.container{
    display: flex;
    justify-content: center; /*主轴对齐方式*/
    align-items: center; /*交叉轴对齐方式*/
}

使用这个方法需要新建一个容器，将容器的display属性设置为flex，然后设置justify-content属性为center，表示主轴上居中对齐，同时设置align-items属性也为center，表示交叉轴上居中对齐。

/*方法三：使用position定位*/
div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

使用这个方法需要将目标元素的position属性设置为absolute，然后通过top:50%和left:50%将元素的中心点位置移动到浏览器视口的中心位置，接着使用transform属性将元素向左、向上移动自身宽高的一半，从而实现中心对齐。