一.水平居中
先看html代码:
<div class="div1">
<div class="div2">div2</div>
</div>
1.1内联元素的水平居中
使用text-align:center; CSS样式代码如下:
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
}
.div2 {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;/*声明为内联块*/
/*display: inline;*/
/*display: inline-table;*/
/*display: inline-flex;*/
/*display: inline-grid;*/
}
其中注释的几种方式均有效果
1.2块级元素水平居中
CSS代码如下:
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
}
.div2 {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
}
其中,只需在div2中添加margin: 0 auto;即可。
二.垂直居中
2.1单行内联元素垂直居中
html代码:
<div class="div1">
<span>内联元素</span>
</div>
CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
line-height: 300px;
}
关键代码:line-height = height;需要注意的是,利用行高实现居中并非绝对的垂直居中
三.水平垂直居中
3.1 绝对定位+margin:auto
条件:宽高固定
使用绝对定位,CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
3.2 绝对定位+margin负值
条件:宽高固定
使用定位加margin,CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
3.3 绝对定位+translate
可以不限制宽高
使用定位加translate,CSS代码:
.div1 {
width: 300px;
height: 300px;
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
3.4 绝对定位+fit-content+margin:auto
可以不限制宽高
注意: fit-content 属性值在 Edge12~Edge18 版本以及 IE 浏览器中不支持,移动端可以放心使用
使用fit-content
.div1 {
width: fit-content;
height: fit-content;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
3.5 弹性布局
使用flex布局,CSS代码:
.div1 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 500px;
border: 1px solid red;
}
.div2 {
width: 300px;
height: 300px;
border: 1px solid red;
}
居中的方法远不止上面几种,更多的方法可以参考以下链接: