常见css布局水平居中的6种方法

#常见css布局水平居中的6种方法| 来源: 网络整理| 查看: 265

说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。

css布局水平居中

方法一：margin + width

css布局水平居中margin + width *{margin:0;padding:0;} .box{ width:100px; margin:0 auto; background:red; } Demo

这个水平居中方法，我们最熟悉了，也是最常用的，width可以固定px也可以使用百分比

方法二：table + margin

css布局水平居中table + margin *{margin:0;padding:0;} .box{ display: table; margin: 0 auto; background:red; } Demo

说明：display: table在表现上类似block元素，但是宽度为内容宽。无需设置父元素样式（支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为

方法三：inline-block + text-align

css布局水平居中inline-block + text-align *{margin:0;padding:0;} .content{ text-align:center; } .box{ display:inline-block; background: red; } Demo

说明：兼容性佳（甚至可以兼容 IE 6 和 IE 7）

方法四：absolute + margin-left

css布局水平居中absolute + margin-left *{margin:0;padding:0;} .content{ position: relative; } .box{ position: absolute; left: 50%; width: 100px; margin-left: -50px; background: red; } Demo

说明：宽度固定相比于使用transform ，有兼容性更好

方法五：absolute + transform

css布局水平居中absolute + transform *{margin:0;padding:0;} .content{ position: relative; } .box{ position: absolute; left: 50%; transform: translateX(-50%); background: red; } Demo

说明：绝对定位脱离文档流，不会对后续元素的布局造成影响。transform为 CSS3 属性，有兼容性问题

方法六：flex + justify-content

css布局水平居中flex + justify-content *{margin:0;padding:0;} .content{ display: flex; justify-content: center; } .box{ width: 100px; background: red; } Demo

说明：只需设置父节点属性，无需设置子元素flex有兼容性问题

爆款服务器除注明外的文章,均为来源:老汤博客,转载请保留本文地址！原文地址：https://tangjiusheng.com/divcss/173.html

【本文地址】

公司简介

联系我们