css垂直水平居中实现的方式
项目和面试经常遇到css如何实现元素如何水平垂直居中。CSS中实现水平居中,会比较简单。常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: center实现;如果想实现块级元素的水平居中对齐,可以设置magin: auto。而如果想实现垂直居中对齐,或许就不太容易。以下,我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处,望指出。
固定高度的实现水平垂直居中
1.使用绝对定位方法,配合margin负值使用。可以实现
<div class="div0">
<div class="div1"> </div>
</div>
.div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
}
.div1{
width: 200px;
height: 150px;
background: lightcoral;
position: absolute;
left: 50%;
top:50%;
margin-top: -75px;
margin-left: -100px;
}
css3简化上面的方法
<div class="div0">
<div class="div1"> </div>
</div>
.div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
}
.div1{
width: 200px;
height: 150px;
background: lightcoral;
position: absolute;
left:calc(50% - 75px);
top:calc(50% - 100px);
}
2.使用height + line-height的方式,设置同样的值,配合text-align的使用,即可实现文本的水平垂直居中对齐
<div class="div0">
如果是单行文本,行高如块的高度一样时将居中,只一行,行高和元素一样高,居中
</div>
.div0 {
background: lightblue;
height: 80px;
line-height:80px;
text-align:center;
}
高度自适应实现水平垂直居中
- 当一个定位的元素偏移为0且margin为auto时将水平,垂直都居中,且父元素的高度可动态变化
<div class="div0">
<div class="div1"></div>
</div>
.div0{
width:80%;
height:90%;
border:3px solid lightblue;
margin:0 auto;
position:relative
}
.div1{
width:200px;
height:150px;
background:lightgreen;
position:absolute;
/*居中开始*/
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
/*居中结束*/
}
2.CSS3中有transform属性,此属性下有一个translate移动函数,此函数接受两个参数。如果两个参数都为百分比值,此时会基于自身宽度和高定进行移动
<div class="div0">
<img src="img.png" class="img1">
</div>
.div0 {
width: 80%;
height: 70%;
background: lightblue;
margin: 0 auto;
position: relative;
}
.img1 {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
3.css3弹性盒子flex,设置水平居中属性justify-content:center
,设置垂直居中属性align-item:center
<div class="flex">
<div class="item">
aaa
</div>
</div>
.flex{
width:400px;
height:400px;
display:flex;
align-items:center;
justify-content: center;
border:1px solid #000;
}
.flex .item{
width:50px;
height:50px;
background:red;
border:1px solid #000;
}
4.使用可以使用 display: table
来模拟表格,并给子元素设置display: table-cell
,让其成为表格的某个单元格,同时设置vertical-align: middle
,即可实现垂直居中布局
<div class="container">
<div class="inner">
hello world!
</div>
</div>
.container {
display: table; /* 让div以表格的形式渲染 */
width: 100%;
border: 1px solid red;
}
.inner {
display: table-cell; /* 让子元素以表格的单元格形式渲染 */
text-align: center;
vertical-align: middle;
}
其它类型
1.`vertical-align:middle这个属性的特点,它是相对于兄弟级行高(line-height)来定位(我的理解).
<div class="div0">
<img src="img.png" class="img1"><span class="span1"></span>
</div>
.div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
text-align: center;
}
.img1{
vertical-align: middle;
}
.span1{
line-height:500px;
}
2.某些时候需要将小图标与文字对齐,可以使用对齐的属性absmiddle(绝对居中)
<div class="div1">
<img src="img.png" align="absmiddle">电视机</div>
.div1{
border: 2px solid lightblue;
}