Tips：元素一般分为 块级元素 和 行内元素

块级元素可以设置高度，宽度，行内元素则不能，如果将行内元素变成行内块元素就可以设置宽高了，只需要将 display 属性设置为 inline-block 即可;

一、 水平居中

​ 1.行内元素水平居中：给行内元素的父级元素设置 text-align: center ;

<view style="text-align:center">
	<text>水平居中</text>
</view>

​ 2.块级元素水平居中：确保块级元素有一个宽度，给行内元素设置 display: block ; 属性，再给该元素设置 margin: 0 auto ;

<body>
    <view style="width: 100%; height: 100%;">
        <text style="display: block; width: 50px; height: 50px; margin: 0 auto ;">
            水平居中
        </text>
	</view>
</body>

<!-- or -->

<body>
    <view style="width: 100%; height: 100%;">
        <view style="width: 50px; height: 50px; margin: 0 auto ;">
            水平居中
        </view>
	</view>
</body>

​ 3.相对与绝对定位水平居中：确保父级元素具有相对定位属性 relative , 需要居中的子级元素具有绝对定位属性 absolute 。再给子级元素设置 left: 50% ; transform: translateX(-50%) ;

<body style="position: relative;">
	<view style="position: absolute; left: 50%; transform: translateX(-50%);">
    	水平居中
    </view>
</body>

<!-- or -->

<body style="position: relative;">
	<view style="position: absolute; right: 50%; transform: translateX(50%);">
    	水平居中
    </view>
</body>

​ 4.使用 calc() 函数：看懂第3点方法，这第4点方法显得有些鸡肋了。这是在css3以前常见的方式。缺点很容易看出，宽度和减去的常量不能很好的动态变化；

<body style="position: relative;">
	<view style="position: absolute; width: 100px; left: calc(50% - 50px);">
    	水平居中
    </view>
</body>

<!-- or -->

<body style="position: relative;">
	<view style="position: absolute; width: 100px; right: calc(50% + 50px);">
    	水平居中
    </view>
</body>

二、水平垂直居中

​ 能够理解上述水平居中，那么水平垂直居中就很容易理解，需要注意的就是如何垂直。

​ 1.块级元素水平垂直居中：给元素的父级元素设置具体高度 line-height 等于 height 高度

<view style="text-align: center; height: 100px; line-height:100px">
	<text>水平垂直居中</text>
</view>

​ 2.相对与绝对定位水平垂直居中：再给子级元素设置 left: 50% ; top: 50% ; transform: translate(-50%，-50%) ;

<body style="position: relative;">
	<view style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);">
    	水平垂直居中
    </view>
</body>

​ 3. 固定定位中 left: 0 ; top: 0 ; right: 0 ; bottom: 0 : 确保元素有一固定宽高，再给元素设置一个 margin: auto ;

<body>
	<view style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px">
    	水平垂直居中
    </view>
</body>

​ 4. flex 布局：最常见的一种布局方式，属性自由多变。给元素设置
display: flex ; align-items: center; justify-content: center ;

<body>
	<view style="display: flex; align-items: center; justify-content: center;width: 200px; height: 200px">
    	水平垂直居中
    </view>
</body>

常见，常用的水平居中，水平垂直居中的方法都在这了。当然还有很多其它的方法，感兴趣话可以去研究研究。

有疑惑的小伙伴，可能是我表达不清楚，可以留言讨论，如有错误，也希望大家不吝指出。
# css3 # css # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Python文本统计与分析：从基础到进阶

avatar 华为云开发者联盟
cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

教你用Perl实现Smgp协议

avatar 华为云开发者联盟