目录
我们在制作页面的时候,经常需要把元素进行水平垂直居中,所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法,供大家选择运用。
一、实现方式
- 利用定位 + margin:auto
- 利用定位 + margin:负值
- 利用定位 + transform
- table布局
- flex布局
- grid布局
1、利用定位 + margin:auto
父级设置为相对定位,子级设置为绝对定位,并且四个定位属性(top、left、bottom、right)的值都设置为0。
- 如果子级没有设置宽高,则会被拉开到和父级一样的宽高
- 如果子级设置宽高,则会按照设置的宽高来显示,但是实际上子级的虚拟占位已经撑满了整个父级,这时候在给它一个 margin:auto 它就可以上下左右都居中了
<style>
.father{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.son{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<div class="father">
<div class="son"></div>
</div>
2、利用定位 + margin:负值
父级元素设置为相对定位,子级元素移动自身50%实现水平垂直居中
- 不要求父元素的高度,即使父元素的高度变化了,仍然可以保持在父元素的垂直居中的位置,水平方向上操作一样
- 但是需要知道子元素自身的宽高
- ( 可以通过transform属性进行移动 )
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-left:-50px;
margin-top:-50px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
3、利用定位 + transform
transform(-50%,-50%) 会将元素位移自己宽度和高度的 -50%
- 这种方法和margin负值用法一样,可以说是margin负值的替代方案
- 不需要知道自身元素的宽高
<style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
4、table布局
设置父元素为 display:table-cell ,子元素设置为 display:inline-block 。
利用 vertical 和 text-align 可以让所有的行内块级元素水平垂直居中
<style>
.father {
display: table-cell;
width: 200px;
height: 200px;
background: skyblue;
vertical-align: middle;
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
5、flex弹性布局
flex布局可以非常简单的实现垂直水平居中
flex布局的关键属性作用:
- display:flex 时,表示该容器内部的元素将按照flex进行布局
- align-items:center 表示这些元素将相对于本容器水平居中
- justify-content:center 表示这些元素将相对于本容器垂直居中
<style>
.father {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div>
6、grid网格布局
跟flex布局相似
<style>
.father {
display: grid;
align-items:center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red
}
</style>
<div class="father">
<div class="son"></div>
</div>
7、小结
不知道元素宽高大小仍能实现水平垂直居中的方法有:
- 利用定位 + margin:auto
- 利用定位 + transform
- flex布局
- grid布局
二、总结
根据元素标签的性质,可以分为:
- 内联元素居中布局
- 块级元素居中布局
1、内联元素居中布局
水平居中
- 行内元素可设置:text-align:center
- flex布局设置父元素:diaplay:flex justify-content:center
垂直居中
- 单行文本父元素确认高度:height == line-height
- 多行文本父元素确认高度:diaplay:table-cell vertical-align:middle
2、块级元素居中布局
水平居中
- 定宽:margin:0 auto
- 绝对定位 + left:50% + margin:负自身一半
垂直居中
- position:absolute 设置 left、top、margin-left、margin-top(定高)
- display:table-cell
- transform:translate(x,y)
- flex(不定宽高)
- grid(不定宽高),兼容性相对比较差