[分享]css元素页面居中显示

当我们设计网页时，经常会遇到需要让页面中的某个元素居中显示的情况。下面我来介绍一些在CSS中实现居中显示的方法。 / 方法一：利用和transform属性 / .center { : absolute...

当我们设计网页时，经常会遇到需要让页面中的某个元素居中显示的情况。下面我来介绍一些在CSS中实现居中显示的方法。

 /* 方法一：利用position和transform属性 */
    .center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    } 

上面的代码让一个元素的左上角坐标定位在页面的50%处，然后用transform属性把元素向左和向上移动一半的宽度和高度，这样元素就居中了。

 /* 方法二：利用flexbox布局 */
    .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    } 

上面的代码使用flexbox布局，它会把子元素放在容器中央，justify-content:center和align-items:center分别控制主轴和侧轴的居中方式。

 /* 方法三：利用table元素的属性 */
    .table {
        display: table;
        margin: 0 auto;
    }
    .cell {
        display: table-cell;
        vertical-align: middle;
    } 

上面的代码使用table元素，它可以把元素居中，margin:0 auto让元素水平居中，display:table-cell和vertical-align:middle让元素垂直居中。

以上就是几种实现CSS元素居中显示的方法了，选择合适的方法可以使我们的网页更美观。