对于div居中,给出解决方案前,我们需要先说明几点:
- 说到“居中”,那肯定涉及到两种元素,即:容器div 和 待居中div
- 待居中div,是行级元素,还是块级元素(默认类型)
- 当待居中div 为 块级元素时,一般都会设置
width
和height
的
一、行级 div 居中
给 div 设置
display: inline-block
, 则 块级div 就成了 行内div。
方法1 :text-align: center ( 水平居中 )
- 设置元素:容器div
- 居中方向:水平居中
为 “容器div”添加下列样式属性即可:
<style>
.container-div {
text-align: center;
}
</style>
二、块级 div 居中
方法1 :margin: auto; ( 水平居中 )
- 只需要对“待居中div”设置以上属性即可。
- 当只需要设置“水平居中”时,使用此方法最简单、简洁的。
方法2 :flex布局 ( 水平垂直居中 )
- 需要同时设置 “容器div” 和 “待居中div” 设置以上属性即可。
- 当只需要设置“水平垂直居中”时,使用此方法比较简单、简洁的。
为 “容器div”添加下列样式属性即可:
<style>
.flex {
display:flex;
/* 主轴上 居中 */
justily-content: center;
/* 交叉轴上 居中 */
align-items: center;
}
</style>
方法3 :flex布局 + margin ( 水平垂直居中 )
- 设置元素: 容器div + 待居中div
- 可居中方向:水平 + 垂直
样式代码:
<style>
/* 容器div 样式 */
.content-div { display:flex; }
/* 待居中div 样式,下面只取一个*/
/* 水平+垂直 */
.test-div { margin: auto; }
/* 水平 */
.test-div-sp { margin: 0 auto; }
/* 垂直 */
.test-div-cz { margin: auto 0; }
</style>
方法4 :绝对定位(position) + margin ( 水平垂直居中 )
- 设置元素: 容器div + 待居中div
- 可居中方向:水平 + 垂直
样式代码:
<style>
/* 容器div 样式 */
.content-div {
position:relative;
}
/* 待居中div 样式*/
/* 水平 + 垂直 */
.test-div {
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/* 水平 */
.test-div-sp {
position:absolute;
right: 0;
left: 0;
margin: 0 auto;
}
/* 垂直 */
.test-div-cz {
position:absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
</style>
方法5 :绝对定位(position) + transform:translate(-x, -y)( 水平垂直居中 )
- 设置元素: 容器div + 待居中div
- 可居中方向:水平 + 垂直
样式代码:
<style>
/* 容器div 样式 */
.content-div {
position:relative;
}
/* 待居中div 样式*/
/* 水平 + 垂直 */
.test-div {
position:absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%)
}
/* 水平 */
.test-div-sp {
position:relative;
left: 50%;
transform:translate(-50%)
}
/* 垂直 */
.test-div-cz {
position:absolute;
top: 50%;
transform:translate(0, -50%)
}
</style>
【代码思路】
1、容器div设置定位为 relative;
2、待居中div 设置定位的 absolute; 同时设置其与父元素的上,左边距都为 50%,再通过 transform 又向上移动了子元素的 height / 2,向左移动了子元素的 width / 2 。
方法6 :绝对定位(position) + 负margin( 水平垂直居中 )
- 设置元素: 容器div + 待居中div
- 可居中方向:水平 + 垂直
- 使用此方法,必须要知道 待居中div 的宽/高,如 width = 200px, height = 100px
样式代码:
<style>
/* 容器div 样式 */
.content-div {
position:relative;
}
/* 待居中div 样式*/
/* 水平 + 垂直 */
.test-div {
position:absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
/* 水平 */
.test-div-sp {
position:relative;
left: 50%;
margin-left: -100px;
}
/* 垂直 */
.test-div-cz {
position:absolute;
top: 50%;
margin-top: -50px;
}
</style>
【代码思路】
1、容器div设置定位为 relative;
2、待居中div 设置定位的 absolute; 同时设置其与父元素的上,左边距都为 50%,再通过 margin-top 的 负值 又向上移动了子元素的 height / 2,通过 margin-left 的 负值 向左移动了子元素的 width / 2 。