[分享]css中如何让组件居中

在CSS中，让组件居中是一个经常碰到的问题。下面介绍几种方法。水平居中想让一个组件水平居中，可以使用以下方法： .container { display: flex; justifyconten...

在CSS中，让组件居中是一个经常碰到的问题。下面介绍几种方法。

水平居中

想让一个组件水平居中，可以使用以下方法：

 <div class="container">
        <div class="component"></div>
    </div>
    .container {
        display: flex;
        justify-content: center;
    } 

使用flex布局，将父元素的justify-content属性设置为center，即可将子元素水平居中。

垂直居中

想让一个组件垂直居中，可以使用以下方法：

 <div class="container">
        <div class="component"></div>
    </div>
    .container {
        display: flex;
        align-items: center;
    } 

同样是使用flex布局，将父元素的align-items属性设置为center，即可将子元素垂直居中。

水平垂直居中

想让一个组件水平垂直居中，可以使用以下方法：

 <div class="container">
        <div class="component"></div>
    </div>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    } 

即同时设置justify-content和align-items属性为center。