[CSS 面试题] 水平置中的不同方法

[CSS 面试题] 水平置中的不同方法

这系列先以面试会遇到的问题分享给大家，都为自己本身平时较常使用的方法，给各位参考看看。

picture resouce : 理解和使用新的 CSS 样式查询 form 纤维 Elemuwa

区块

透过 边距：0 自动 (经典)

margin : 0 auto

透过 显示：弹性

这方法有两种，取决于主轴在哪

当flex-direction 为 排 (预设)，主轴会呈现水平状态，这时候使用 证明内容：中心 就可达成水平置中。

而当flex-direction 为 柱子 ，主轴会呈现垂直状态，这时候在父元素使用 对齐项目：居中 就可让子元素达成水平置中。

align-items : center

或者让子元素单独使用 对齐自我：中心 ，也可达水平置中 。

align-self : center

position 定位

将子元素设为绝对定位，以父元素做为参考基准，设定 top, left 为 0 (初始位置为左上角)

top , left 為 0

之后将left 改为父元素宽度的一半，也就是50% ( 左：50% )，虽然看似好像置中了，不过目前子元素位置是在父元素正中间的右侧。

top : 0 , left : 50%

最后使用 变换 : translateX(- 50%) ，让子元素往左移动自身宽度的一半，才达到真正的水平置中。

transform : translateX(-50%)

position 定位

信

文本对齐：居中

仅让文字产生置中效果

text-align : center

如果观看的小伙伴们有新的方法或见解，欢迎在下方留言!!!

会持续更新日后发现的新方法~~~

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/36942/59461609