盒子水平垂直居中的N种方案
1、定位+margin拉回
复制代码<style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -15px; } </style> <body> <div id="box"> <span id="block">1</span> </div> </body>
2、定位+transform拉回
<style> #box { width: 100px; height: 100px; position: relative; background-color: #ff0; } #block { width: 30px; height: 30px; background-color: aqua; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <body> <div id="box"> <span id="block">1</span> </div> </body>
3、绝对定位各方向0+margin: auto
<style> #box { width: 100px; height: 100px; position: relative; background-color: #f00; } #block { width: 30px; height: 30px; background-color: #ff0; position: absolute; left: 0; bottom: 0; right: 0; top: 0; margin: auto; } </style> <body> <div id="box"> <span id="block">1</span> </div> </body>
4、flex布局 + 设置水平垂直居中
<style> #box { width: 100px; height: 100px; background-color: brown; display: flex; justify-content: center; align-items: center; } #block { width: 30px; height: 30px; background-color: #f0f; } </style> <body> <div id="box"> <span id="block">1</span> </div> </body>
5、flex布局 + margin: auto
<style> #box { width: 100px; height: 100px; background-color: brown; display: flex; } #block { width: 30px; height: 30px; background-color: #f0f; margin: auto; } </style> <body> <div id="box"> <span id="block">1</span> </div> </body>
6、display: table-cell vertical-align text-align 组合使用
<style> #box { width: 100px; height: 100px; background-color: #0ff; display: table-cell; text-align: center; // 子元素需要设置行内属性 vertical-align: middle; } #block { width: 30px; height: 30px; background-color: #00f; display: inline-block; } </style> <body> <div id="box"> <div id="block">b</div> </div> </body>
注意子元素需要设置行内属性， text-align: center; 才会让元素居中 触发IFC
7、display: box; 设置box-align和box-pack center
<style> #box { width: 100px; height: 100px; background-color: #0ff; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; } #block { width: 30px; height: 30px; background-color: orange; } </style> <body> <div id="box"> <div id="block">1</div> </div> </body>
注意各浏览器的兼容问题，注意前缀
8、display: grid 布局 display: grid + place-items:center
<style> #box { width: 100px; height: 100px; background-color: #0ff; display: grid; place-items: center; } #block { width: 30px; height: 30px; background-color: orange; } </style> <body> <div id="box"> <span id="block"></span> </div> </body>
或者通过设置网格区域
<style> #box { width: 100px; height: 100px; background-color: #0ff; display: grid; grid-template-rows: 1fr 30px 1fr; grid-template-columns: 1fr 30px 1fr; } #block { width: 30px; height: 30px; background-color: orange; grid-area: 2/2/3/3; } </style> <body> <div id="box"> <span id="block"></span> </div> </body> <style> #box { width: 100px; height: 100px; background-color: #ff0; text-align: center; } #block { /* 形成IFC， 父元素设置 text-align: center; 居中子元素，vertical-align: middle; 居中其他兄弟元素*/ width: 0px; height: 100px; background-color: #f00; display: inline-block; vertical-align: middle; opacity: 0; } #block2 { background-color: #f0f; width: 60px; display: inline-block; } </style> <body> <div id="box"> <span id="block">1</span> <span id="block2">2</span> </div> </body> 作者：重阳微噪 链接：https://juejin.cn/post/6875963221870805005 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
9、display: inline-block; 利用IFC，行内元素撑开高度设置vertical-align
<style> #box { width: 100px; height: 100px; background-color: #ff0; text-align: center; } #block { /* 形成IFC， 父元素设置 text-align: center; 居中子元素，vertical-align: middle; 居中其他兄弟元素*/ width: 0px; height: 100px; background-color: #f00; display: inline-block; vertical-align: middle; opacity: 0; } #block2 { background-color: #f0f; width: 60px; display: inline-block; } </style> <body> <div id="box"> <span id="block">1</span> <span id="block2">2</span> </div> </body>
10、利用calc函数动态计算实现
<style> #box { width: 100px; height: 100px; background-color: #0ff; position: relative; } #block { position: absolute; width: 30px; height: 30px; left: -webkit-calc((100px - 30px)/2); top: -webkit-calc((100px - 30px)/2); left: -moz-calc((100px - 30px)/2); top: -moz-calc((100px - 30px)/2); left: calc((100px - 30px) / 2); top: calc((100px - 30px) / 2); background-color: orange; } </style> <body> <div id="box"> <div id="block">b</div> </div> </body>
11、单纯文字水平垂直居中 一般只需要设置text-align和line-height和高度相同
<style> #box { width: 100px; height: 100px; background-color: #0ff; line-height: 100px; text-align: center; } </style> <body> <div id="box">居中文字</div>
