麻烦帮我测试一下我这代码哪里错误了，导致盒子不能居中

Question

<view class='main'>
<image src='/images/胡歌.jpg' class="image"></image>
<text class="word">hello world</text>
<view class='box'>
<text class='box-word'>naniu</text>
</view>
</view>
分割线，下边的是CSS代码

.image{

width: 200rpx;

height: 200rpx;

margin-top: 160rpx;

}

.main{

display: flex;

flex-direction: column;

align-items: center;

}

.word{

font-size: 24px;

font-weight: bold;

margin-top: 160rpx;

}

.box{

width: 600rpx;

height: 100rpx;

border: 1px solid blue;

border-radius: 5px;

text-align: center;

margin-top: 160px;

}

.box-word{

line-height: 100rpx;

}

page{

background-color: orange;

height:100%;

}

麻烦帮我测试一下，按照老师之前讲的内容写的，图片看不见问题不大，主要是最下边的盒子在我设置宽度600rpx以后就很明显的不居中显示了

Answer 1

7七月 2019-04-09 02:01:33

不知道你到底要什么居中？如果要文字居中，那应该设置box 为flex啊。

• 提问者 JIANGYUHANG #1

  我的意思是我把最外边的盒子设定为弹性盒子模型，也就是class为main的盒子，然后设置flex-itmes为center，并且设置flex-direction设置为column，那盒子里边的照片还有文字，包括最下边的小盒子都是一列一列的然后居中显示吧，但这三样现在都不居中，统一偏在一边

• 7七月 回复 提问者 JIANGYUHANG #2

  我个人觉得，这个要你自己试一下。先屏蔽一些元素，只放一个元素 是不是居中的？理论上，main是flex，子元素确实应该居中。

• 提问者 JIANGYUHANG #3

  谢谢，检查了一下，搞定了