说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中
说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。
方法一：margin + width
<!Doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"/><title>css布局水平居中margin + width</title><style type="text/css">*{margin:0;padding:0;}.box{width:100px;margin:0 auto;background:red;}</style></head><body><div class="box">Demo</div></body></html>这个水平居中方法，我们最熟悉了，也是最常用的，width可以固定px也可以使用百分比
方法二：table + margin
<!Doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>css布局水平居中table + margin</title> <style type="text/css"> *{margin:0;padding:0;} .box{ display: table; margin: 0 auto; background:red; } </style></head><body> <div class="box">Demo</div></body></html>说明：display: table在表现上类似block元素，但是宽度为内容宽。无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为<table>
方法三：inline-block + text-align
<!Doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>css布局水平居中inline-block + text-align</title> <style type="text/css"> *{margin:0;padding:0;} .content{ text-align:center; } .box{ display:inline-block; background: red; } </style></head><body><div class="content"> <div class="box">Demo</div></div></body></html>说明：兼容性佳（甚至可以兼容 IE 6 和 IE 7）
方法四：absolute + margin-left
<!Doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>css布局水平居中absolute + margin-left</title> <style type="text/css"> *{margin:0;padding:0;} .content{ position: relative; } .box{ position: absolute; left: 50%; width: 100px; margin-left: -50px; background: red; } </style></head><body><div class="content"> <div class="box">Demo</div></div></body></html>说明：宽度固定相比于使用transform ，有兼容性更好
方法五：absolute + transform
<!Doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>css布局水平居中absolute + transform</title> <style type="text/css"> *{margin:0;padding:0;} .content{ position: relative; } .box{ position: absolute; left: 50%; transform: translateX(-50%); background: red; } </style></head><body><div class="content"> <div class="box">Demo</div></div></body></html>说明：绝对定位脱离文档流，不会对后续元素的布局造成影响。transform为 CSS3 属性，有兼容性问题
方法六：flex + justify-content
<!Doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>css布局水平居中flex + justify-content</title> <style type="text/css"> *{margin:0;padding:0;} .content{ display: flex; justify-content: center; } .box{ width: 100px; background: red; } </style></head><body><div class="content"> <div class="box">Demo</div></div></body></html>说明：只需设置父节点属性，无需设置子元素flex有兼容性问题
本站部分文章来自网络或用户投稿，如无特殊说明或标注，均为本站原创发布。涉及资源下载的，本站旨在共享仅供大家学习与参考，如您想商用请获取官网版权，如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。