前端面试经典问题：CSS中居中的几种方式
16lz
2021-04-02
1.水平居中的 margin：0 auto;
关于这个，大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的，前提是不受float影响
<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>2.水平居中 text-align：center；
img的display：inline-block；类似一样在不受float影响下进行 实在父元素上添加效果让它进行水平居中
<style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 3px solid red; text-align: center; } img{ display: inline-block; width: 100px; height: 100px; /*margin: 0 auto;*/ } </style><!--html--><body> <div class="box">  </div></body>3.水平垂直居中（一）定位和需要定位的元素的margin减去宽高的一半
这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法
<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>4.水平垂直居中（二）定位和margin:auto;
这个方法也很实用，不用受到宽高的限制,也很好用
<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>5.水平垂直居中（三）绝对定位和transfrom
这个方法比较高级了，用到了形变，据我所知很多大神喜欢使用这个方法进行定位，逼格很高的，学会后面试一定要用！这个是不需要知道居中元素的宽高就可以使用的，代码里的图片稍微有点大，改改宽高，仅此而已，在面试中大部分人会问如果不知道宽高该如何居中，答这个，加分！对transform不了解的同学可以查阅一下资料了解一下！
<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>6.水平垂直居中（四）diplay：table-cell
其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便
<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>7.水平垂直居中（五）flexBox居中
这个用了C3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题，以后会成为主流的
<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>8.水平垂直居中（六）利用vertical-align:middle;
这方法不常见，但是一位朋友补充后我觉得也不失为一种好方法可以让别人刮目相看，这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样
<style> .wrap{ width:300px; height:300px; background:rgba(0,0,0,0.5); text-align:center; font-size:0; } .vamb{ display:inline-block; width:0px; height:100%; vertical-align:middle; } .test{ display:inline-block; vertical-align:middle; font-size:16px; text-align:left; background:red; }</style><body> <div class="wrap"> <b class="vamb"></b> <div class="test"> 宽高不定<br> 垂直水平居中 </div> </div></body>你的鼓励让我更有动力
赞赏
0人进行了赞赏支持
更多相关文章
- 【归纳】赶紧收藏css实现水平垂直居中的八种快速方法总结
- 1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
- 0324作业
- 传统定位和flex定位
- box-sizing功能。相对定位与绝对定位。绝对定位：块级居中。
- 0323作业
- 0323作业-CSS盒模型、CSS相对定位和绝对定位及块元素垂直居中
- 定位属性position 的介绍
- Kubernetes Pod水平自动伸缩（HPA）