一、垂直居中
1.内联元素
给内联元素的上下加上相等的padding。
HTML代码
<main>
<a href="">我们</a>
<a href="">是</a>
<a href="">居中的</a>
</main>
CSS样式
main {
border: 1px solid red;
margin: 20px 0;
padding: 50px;
}
main a {
background: black;
color: white;
padding: 40px 30px;
text-decoration: none;
}
效果图
内联元素垂直居中.png
2.块级元素中的文字垂直居中
将元素的line-height定为和元素的高度一致。
HTML代码
<main>
<div>我是垂直居中的</div>
</main>
CSS样式
main {
border: 1px solid red;
margin: 20px 0;
}
main div {
height: 200px;
line-height: 200px;
text-decoration: none;
background: black;
color: white;
}
效果图
块级元素中的文字垂直居中.png
3.高度确定的块级元素
使用绝对定位，top设置为50%，magrgin-top设置为负的高度的一半。
HTML代码
<main>
<div>定高的块级元素垂直居中</div>
</main>
CSS样式
main {
height: 300px;
border: 1px solid red;
position: relative
}
main div {
height: 100px;
line-height: 100px; /*使文字垂直居中*/
position: absolute;
top: 50%;
margin-top: -50px; /*值为高度100px的一半*/
background: black;
color: white;
}
效果图
定高的块级元素垂直居中.png
4.高度不确定的块级元素
方法一：使用绝对定位，top设置为50%，translateY设置为-50%。
HTML代码
<main>
<div>高度不确定的块级元素垂直居中</div>
</main>
CSS样式
main {
height: 300px;
border: 1px solid red;
position: relative
}
main div {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: black;
color: white;
}
效果图
高度不定的块级元素垂直居中.png
方法二：使用flex布局。
HTML代码
<main>
<div>高度不确定的块级元素垂直居中</div>
</main>
CSS样式
main {
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid red;
}
main div {
background: black;
color: white;
}
二、水平垂直居中
1.高度不定的块级元素
使用绝对定位，top设置为50%，left设置为50%，translate(-50%, -50%)
HTML代码
<main>
<div>高度不定的块级元素水平垂直居中</div>
</main>
CSS样式
main {
height: 300px;
border: 1px solid red;
position: relative
}
main div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: black;
color: white;
}
效果图
高度不定的块级元素水平垂直居中.png
2.高度确定的块级元素
使用绝对定位，top设置为50%，left设置为50%，margin为负的元素宽高各自的一半。
HTML代码
<main>
<div>高度确定的块级元素水平垂直居中</div>
</main>
CSS样式
main {
height: 300px;
border: 1px solid red;
position: relative;
}
main div {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
margin: -100px; /*值为宽高200px的一半*/
left: 50%;
background: black;
color: white;
}
效果图
高度确定的块级元素水平垂直居中.png
3.flex布局实现水平垂直居中
HTML代码
<main>
<div>felx布局</div>
</main>
CSS样式
main {
height: 300px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
main div {
width: 200px;
height: 200px;
background: black;
color: white;
}
4.grid布局实现水平垂直居中
HTML代码
<main>
<div>grid布局</div>
</main>
CSS样式
main {
height: 300px;
border: 1px solid red;
display: grid;
}
main div {
width: 200px;
height: 200px;
background: black;
color: white;
margin: auto;
}
