布局居中显示

Marchosius

于 2021-02-23 20:03:55 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序笔记文章标签： css 小程序

本文链接：https://blog.csdn.net/qq_41356707/article/details/114001880

笔记同时被 2 个专栏收录

10 篇文章

订阅专栏

小程序

2 篇文章

订阅专栏

本文介绍如何使用Flexbox布局将一个粉色背景、200px宽高的元素设置为水平居中，同时带有5px实线边框。通过调整margin属性，轻松实现视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初试wxss代码如下:

.back {
  background: pink;
  height: 200px;
  width: 200px;
  display: flex;
  border: 5rpx solid #ff9400;
  /* margin: 10rpx auto; */
}

运行结果如下:
在这里插入图片描述
现在想让其水平居中显示, 改写上述代码如下:

.back {
  background: pink;
  height: 200px;
  width: 200px;
  display: flex;
  border: 5rpx solid #ff9400;
  margin: 10rpx auto; /* margin后面的两个值，第一个表上边边距是10rpx，第二个是auto，自动水平居中 */
}

效果如下:
在这里插入图片描述