前端面试经典问题：CSS中居中的几种方式
linydee
7年前
<p>作为面试常客，学会这些，面试多点把握，同学间逼格升高</p> <p>周五，老大说他面试了一个问题，是css居中的问题，然后我们在这边就讨论了一番，周末嗨玩，尾巴上想起这件事，特来总结，希望能帮助到求职和学习的朋友！</p> <h3>1.水平居中的 margin：0 auto;</h3> <p>关于这个，大家也不陌生做网页让其居中用的比较多,</p> <p>这个是用于子元素上的，前提是不受float影响</p> <pre> <code class="language-css"><style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 3px solid red; /*text-align: center;*/ } img{ display: block; width: 100px; height: 100px; margin: 0 auto; } </style> <!--html--> <body> <div class="box">  </div> </body></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/d37936559474d191924db95cc37af266.png"></p> <h3>2.水平居中 text-align：center；</h3> <p>img的display：block；类似一样在不受float影响下进行</p> <p>实在父元素上添加效果让它进行水平居中</p> <pre> <code class="language-css"><style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 3px solid red; /*text-align: center;*/ } img{ display: block; width: 100px; height: 100px; margin: 0 auto; } </style> <!--html--> <body> <div class="box">  </div> </body></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/25bc32eec8f82efe28fd4fb4ea8e479f.png" alt="前端面试经典问题：CSS中居中的几种方式" width="311" height="306"></p> <h3>3.水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半</h3> <p>这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法</p> <pre> <code class="language-css"><style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; background:#e9dfc7; border:1px solid red; position: relative; } img{ width: 100px; height: 150px; position: absolute; top: 50%; left: 50%; margin-top: -75px; margin-left: -50px; } </style> <!--html --> <body> <div class="box" >  </div> </body></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/dd65ed6c7efb53b062ddd18cd0e0b4b9.png"></p> <p style="text-align:center">水平垂直居中1</p> <h3>4.水平垂直居中（二）定位和margin:auto;</h3> <p>这个方法也很实用，不用受到宽高的限制,也很好用</p> <pre> <code class="language-css"><style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; background:#e9dfc7; border:1px solid red; position: relative; } img{ width: 100px; height: 100px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> <!--html --> <body> <div class="box" >  </div> </body></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/60df90e4b3bbb04f875aa55a76169836.png"></p> <p style="text-align:center">水平垂直居中2</p> <h3>5.水平垂直居中（三）绝对定位和transfrom</h3> <p>这个方法比较高级了，用到了形变，据我所知很多大神喜欢使用这个方法进行定位，逼格很高的，学会后面试一定要用！</p> <pre> <code class="language-css"><style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; background:#e9dfc7; border:1px solid red; position: relative; } img{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> <!--html --> <body> <div class="box" >  </div> </body></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/8261906f9e747b4c644195a123245423.png"></p> <p style="text-align:center">水平垂直居中3</p> <p style="text-align:center">6.水平垂直居中（四）diplay：table-cell</p> <p>其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便</p> <pre> <code class="language-css"><style> .box{ width: 300px; height: 300px; background:#e9dfc7; border:1px solid red; display: table-cell; vertical-align: middle; text-align: center; } img{ width: 100px; height: 150px; /*margin: 0 auto;*/ 这个也行 } </style> <!--html --> <body> <div class="box" >  </div> </body></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/72c9bb589d87ddbfad80feb11f80d557.png"></p> <p style="text-align:center">水平垂直居中4</p> <h3>7.水平垂直居中（五）flexBox居中</h3> <p>这个用了C3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题，以后会成为主流的</p> <pre> <code class="language-css"><style> .box{ width: 300px; height: 300px; background:#e9dfc7; border:1px solid red; display: flex; justify-content: center; align-items:center; } img{ width: 150px; height: 100px; } </style> <!--html --> <body> <div class="box" >  </div> </body></code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/2dab2b6943d5a4ed3ae171e0c6afb8f2.png"></p> <p style="text-align:center">垂直居中5</p> <p>常见又实用的例子就先写到这，欢迎提意见，谢谢大家！喜欢请点个喜欢，也是对我的支持和鼓励！</p> <p> </p> <p>来自：http://www.jianshu.com/p/a7552ce07c88</p> <p> </p>