前端面试中最常被问到的纵横居中问题

时间：2023-03-30 22:39:06 CSS

方法一、CSS3变换和定位（未知元素宽高）未知宽高

.box{width:400px;高度：400px；背景：#ccc；位置：相对；}.boxspan{背景：红色；位置：绝对；左：50%；顶部：50%；颜色：#fff；transform:translate(-50%,-50%);}方法二、绝对定位和margin-left:-自身宽度的一半，margin-top:-自身高度的一半（已知宽高）已知宽高

.box{width:400px;高度：400px；背景：#ccc；position:relative;}.boxspan{display:inline-block;宽度：100px；高度：100px；背景：红色；;行高：100px；位置：绝对；左：50%；顶部：50%；颜色：#fff；左边距：-50px；margin-top:-50px;}方法三、CSS3弹性布局

.box{width:400px;高度：400px；背景：#ccc；显示：弹性；证明内容：居中；对齐项目：中心；}.box.child{显示：内联块；宽度：100px；高度：100px；background:red;}方法四、居中元素为inline或inline-block元素inline和inline-block元素.box{宽度：400px；高度：400px；背景：#ccc；显示：表格单元格；文本对齐：居中；vertical-align:middle;}.box.child{display:inline-block;宽度：100px；高度：100px；background:red;}方法五、绝对定位和margin:auto设置高度.box{width:400px;高度：400px；背景：#ccc；位置：相对；}.box.child{宽度：100px；高度：100px；背景：红色；文本对齐：居中；颜色：#fff；行高：100px；位置：绝对；顶部：0；右：0；底部：0；左：0；margin:auto;}方法六、line-height:parentheightandtext-align:centerline-height.box{width:400px;高度：400px；背景：#ccc；行高：400px；文本对齐：居中；字体大小：0；}.box.child{背景：红色；字体大小：14px；颜色：#fff;}

上一篇：小米CC能否打开高端手机市场的大门？

下一篇：阅读《css世界》笔记(一)

前端面试中最常被问到的纵横居中问题相关文章