盒子水平垂直居中的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>
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>
</body>
