.box {
display: flex; /* 设置为flex布局 */
justify-content: center; /* 水平对齐方式为居中对齐 */
align-items: center; /* 垂直对齐方式为居中对齐 */
}以上代码表示，在一个名为.box的元素中，大家使用了flex布局，并且通过justify-content和align-items两个属性来进行对齐。justify-content用于控制水平方向上的对齐方式，常用的值包括：
- flex-start：左对齐
- center：居中对齐
- flex-end：右对齐
- space-between：两端对齐，元素之间的间距相等
- space-around：每个元素两侧的间距相等，元素之间的间距也相等
而align-items用于控制垂直方向上的对齐方式，常用的值包括：
- flex-start：上对齐
- center：居中对齐
- flex-end：下对齐
- baseline：以基线对齐
- stretch：拉伸元素，让它们填满容器
总之，双向标记可以让大家更加灵活地控制页面中元素的对齐方式，让网页的样式更加美观。同时，大家也需要结合具体情况灵活运用，选择合适的对齐方式。