[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 版权协议，转载请附上原文出处链接和本声明
