水平居中
行内元素
行内元素的父级元素设置text-align:center
<style>
.parent {
text-align: center;
}
</style>
<div class="parent">
<span>Hello world!</span>
</div>
宽度确定的块级元素
- 哪个元素要实现水平居中,就对那一个元素使用
margin:0 auto;
<style>
.outer {
width: 400px;
height: 400px;
background-color: bisque;
}
.content {
background-color: skyblue;
width: 200px;
height: 200px;
margin: 0 auto;
}
</style>
<div class="outer">
<div class="content"></div>
</div>
- 父级元素
position: relative
,子元素绝对定位 + margin-left: -(width/2) + left:50%
<style>
.parent{
position: absolute;
width: 400px;
height: 400px;
background-color: bisque;
}
.child {
position: relative;
background-color: skyblue;
width: 200px;
height: 200px;
left: 50%;
margin-left: -100px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
宽度未知的块级元素
display:table + margin左右auto
<style>
.content {
display: table;
margin: 0 auto;
background-color: red;
}
</style>
<div class="content">
宽度未知的块级元素
</div>
- 父级元素设置
text-align: center;
,子级元素设置display: inline-block;
<style>
.parent {
text-align: center;
}
.child{
display: inline-block;
}
</style>
<div class="parent">
<div class="child">宽度未知的块级元素</div>
</div>
- 绝对定位 + transform: translateX(-50%) + left:50%
<style>
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="content">hello world</div>
- flex布局 + justify-content:center
<style>
.content {
display: flex;
justify-content: center;
}
</style>
<div class="content">hello world</div>
垂直居中
- 纯文字类:用
line-height:height
实现垂直居中
<style>
.content {
background-color: skyblue;
width: 200px;
height: 200px;
line-height: 200px;
}
</style>
<div class="content">
hello world
</div>
效果图:
2. 父级元素设置相对定位
子级元素设置绝对定位 + 上下为0 + margin:auto
<style>
.parent {
width: 400px;
height: 400px;
position: relative;
background-color: skyblue;
}
.child {
width: 200px;
height: 200px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
background-color: salmon;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
- 父级元素设置
相对定位
子级元素设置绝对定位 + top:50% + margin-top:-(height/2)
<style>
.parent {
width: 400px;
height: 400px;
position: relative;
background-color: skyblue
}
.child {
width: 200px;
height: 200px;
position: absolute;
background-color: salmon;
top: 50%;
margin-top: -100px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
补充:这里将margin-top:-(height/2)替换成:transform:translateY(-50%),也可以实现垂直居中。
3. 父级元素设置display: table-cell + vertical-align: middle
<style>
.parent {
width: 400px;
height: 400px;
display: table-cell;
vertical-align: middle
background-color: skyblue;
}
.child {
width: 200px;
height: 200px;
background-color: salmon;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
- 父级元素设置
display:flex + align-items:center
<style>
.parent {
width: 400px;
height: 400px;
display: flex;
align-items: center;
background-color: skyblue;
}
.child {
width: 200px;
height: 200px;
background-color: salmon;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
最终效果图:
水平垂直居中
- 父级元素设置
相对定位
子级元素设置绝对定位 + 上下左右为0 + margin:auto
<style>
.parent {
position: relative;
width: 400px;
height: 400px;
background-color: skyblue;
}
.child {
position: absolute;
background-color: pink;
width: 200px;
height: 200px;
bottom: 0;
right: 0;
top: 0;
left: 0;
margin: auto;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
- 父级元素设置
相对定位
子级元素设置绝对定位 + top、left:50% + margin-top:-(height/2) + margin-left:-(width/2)
<style>
.parent {
position: relative;
width: 400px;
height: 400px;
background-color: skyblue;
}
.child {
position: absolute;
background-color: pink;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
补充:这里将margin-top:-(height/2)和margin-left:-(width/2)替换成:transform:translateY(-50%)以及transform:translateX(-50%),也可以实现水平垂直居中。
3. 父级元素设置display:flex + align-items:center + jusitify-content:center
<style>
.parent {
display: flex;
width: 400px;
height: 400px;
background-color: skyblue;
justify-content: center;
align-items: center;
}
.child {
background-color: pink;
width: 200px;
height: 200px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
最终效果图: