-
水平居中
1.行内元素
父元素设置属性text-align: center
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
text-align: center;
}
.son{
border: 1px solid blue;
}
</style>
<body>
<div class="box">
<span class="son">hahahha</span>
</div>
</body>
2.块级元素
2.1 一般居中方法margin: 0 auto;
2.2 使用绝对定位
（1）采用left: 50%; transform: translateX(-50%)
<style>
.box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 50px;
border: 1px solid orange;
}
</style>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
(2) 采用left: 0; right: 0; margin: 0 auto
<style>
.box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 100px;
height: 50px;
border: 1px solid orange;
}
</style>
（3） 采用left: 50%; margin-left: -50px;
<style>
.box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 50px;
border: 1px solid orange;
}
</style>
2.3 使用flex
父元素设置display: flex; justify-content: center;
<style>
.box {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
width: 100px;
height: 50px;
border: 1px solid orange;
}
</style>
2.4 使用grid
父/子元素设置 display: grid; 子元素设置 margin: 0 auto;
<style>
.box {
display: grid;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
margin: 0 auto;
width: 100px;
height: 50px;
border: 1px solid orange;
}
</style>
2.5 使用table-cell
父元素设置 display: table-cell; 子元素设置 margin: 0 auto;
<style>
.box {
display: table-cell;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
margin: 0 auto;
width: 100px;
height: 50px;
border: 1px solid orange;
}
</style>
-
垂直居中
1. 行内元素
给子元素设置 line-height: 父元素的高度
2. 行内块元素
2.1 使用table
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.son {
display: inline-block;
background: yellow;
}
</style>
<body>
<div class="box">
<div class="son">哈哈哈</div>
</div>
</body>
3. 块级元素
3.1 使用绝对定位
（1）采用top: 50%; margin-top: -25px;
<style>
.box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
position: absolute;
top: 50%;
margin-top: -25px;
width: 100px;
height: 50px;
background: yellow;
}
</style>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
(2)采用top: 50%; margin-top: -25px;
<style>
.box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100px;
height: 50px;
background: yellow;
}
</style>
(3) 采用top: 0; bottom: 0; margin: auto 0
<style>
.box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
width: 100px;
height: 50px;
background: yellow;
}
</style>
3.2 使用flex
父元素设置 displsy: flex; aligh-items: center;
<style>
.box {
display: flex;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
width: 100px;
height: 50px;
background: yellow;
}
</style>
3.3 使用grid
父元素设置 displsy: grid; 子元素设置 margin: auto 0;
<style>
.box {
display: grid;
width: 200px;
height: 200px;
border: 1px solid red;
}
.son {
width: 100px;
height: 50px;
background: yellow;
margin: auto 0;
}
</style>
总结
- flex、 grid、绝对定位方法垂直/水平居中均可以；
- 行内元素水平居中：父元素text-alin: center; 垂直居中：子元素line-height: 父元素高度；
