[分享]css中2个框架居中对齐

CSS中，让两个框架居中对齐是常见的布局需求。下面介绍两种方式实现框架居中对齐的效果。

方式1：使用Flex布局

.container{
    display: flex;
    justify-content: center;
    align-items: center;
} 

这里的 container 可以是任何包裹需要居中对齐的框架的父级元素。这个父级元素上使用 display:flex; 属性，并通过 justify-content: center; 和 align-items: center; 属性让框架水平和垂直居中对齐。

方式2：使用绝对定位

 .container {
    position: relative;
}
.container .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

这个方法需要将框架的父级元素设置为 position: relative;，然后将框架本身设置为 position: absolute;，再通过 top: 50%; 和 left: 50%; 将框架移动到父级元素的中心位置，最后使用 transform: translate(-50%, -50%); 让框架从自己的中心位置再次移动到父级元素的中心位置。

以上两种方式能够很好地实现两个框架的居中对齐。需要根据实际需求选择合适的方法进行布局。