[分享]css两个块元素对齐居中

CSS是用来控制网页样式的一种语言，常用于网页的排版布局，其中块元素的对齐居中是经常用到的特性。下面是两种常见的方式来对齐块元素居中。方法一：利用margin属性.center { width: 20...

CSS是用来控制网页样式的一种语言，常用于网页的排版布局，其中块元素的对齐居中是经常用到的特性。下面是两种常见的方式来对齐块元素居中。

方法一：利用margin属性

.center {
    width: 200px;
    height: 100px;
    margin: 0 auto;
} 

以上代码中，将居中元素的左右margin设置为“auto”，此时浏览器会自动计算左右margin的值，从而使块元素在容器中水平居中。但是，上下居中还需要另外一种方式。

方法二：利用display和text-align属性

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    text-align: center;
}
.center {
    width: 100px;
    height: 100px;
} 

以上代码中，给外层容器设置display为flex，justify-content属性控制水平居中，align-items属性控制垂直居中。同时，由于块元素是内联元素，还需要通过text-align属性控制其水平居中。

以上两种方法都可以实现块元素的对齐居中，开发者可以根据实际需求选择使用哪种方式。