1、绝对定位 + margin
.cont{
position: relative;
width:300px;
height:300px;
background:red;
}
.box{
position: absolute;
top:50%;
left:50%;
width:50px;
height:50px;
margin-top:-25px;
margin-left:-25px;
background:#666;
}
.cont {
position: relative;
width: 300px;
height: 300px;
background: red;
}
.box {
position: absolute;
top: 50%;
left: 50%;
width: 30%;
height: 30%;
margin-top:-15%;
margin-left: -15%;
background: #666;
}
原理：这种居中方式需要知道子元素的具体宽、高值,可以是 px 的度量单位也可以是相对于父元素的百分比单位；主要是要理解定位 top 、 left 和外边距的计算方式：如果这些属性是以百分比 % 为度量单位，则计算的依据是父元素的宽和高
1.2、 绝对定位
.cont{
position: relative;
width:300px;
height:300px;
background: red;
}
.box{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:50px;
height:50px;
margin:auto;
background: #666;
}
原理：同时设置了定位的4各方向为0，这时候元素是定位于左上角的，再设置 margin: auto; 浏览器就会渲染自动分配边距，以达到居中的效果，这种设置是优点在于不需要准确的计算 margin 的值；其父元素和子元素同样可以使用百分比 % 来做度量单位
2、绝对定位 + transform:translate(50%,50%)
.cont{
position: relative;
width:300px;
height:300px;
background:red;
}
.box{
position: absolute;
top:50%;
left:50%;
padding:100px;
transform:translate(-50%,-50%);
background:#666;
}
原理：这种定位方式和第一种大致一样，需要理解是 translate 的计算方式是相对与自身的宽高来计算的。它可以不用设定子元素的具体宽高。对于一些随着内容而自增的元素可以使用这种方式。
3、line-height + display:inline-block
.cont {
position: relative;
width: 300px;
height: 300px;
line-height:300px;
background: red;
text-align: center;
font-size:0;
}
.box {
display:inline-block;
width: 50px;
height: 50px;
background:#666;
vertical-align: middle;
}
原理：通过将子元素的 display 属性设置为 inline-block，让块级元素模拟行内元素，在设置行高 line-height 和 文本居中的方式 text-align: center来让元素居中。因为 line-height 是根据字体的 size 来计算的，所以为了不让 font-szie 影响的子元素的居中需要设置为 0，同时还需要设置子元素的基线为 middle ，不然将会根据 baseline 基线对齐（baseline 不在元素的中间，在 bottom 的上方）。使用这种方式也可以不需要设置子元素的具体宽高。
4、display:flex
.cont {
display:flex;
align-items:center;
justify-content:center;
width: 300px;
height: 300px;
background: red;
}
.box {
width: 50px;
height: 50px;
background:#666;
}
原理：使用 flex 布局，设置子项垂直居中 align-items:center、水平居中 justify-content:center;
子元素可以使用 px 或 % 度量单位，也可以不做具体的设置。相比前几中方式代码少，容易理解。
5、display:table-cell
.cont {
display:table-cell;
width: 300px;
height: 300px;
background: red;
vertical-align:middle;
text-align:center;
}
.box {
display:inline-block;
width: 50px;
height: 50px;
background:#666;
vertical-align:middle;
}
原理：设置父元素 display:table-cell ，模拟表格显示；在通过设置元素的基线为 middle 和文本对齐方式 center 来让子元素居中，子元素如果是块及元素需要设置 display:inline-block，还需要设置其基线为 middle。子元素的度量单位可以是 px、%，也可以不做具体设置。
总结
对于以上多种水平垂直的对齐方案，在实际的项目开发中应该如何做选择呢?
如果是 PC 端的项目建议使用1、1.2种方法，方便维护和理解，并且兼容性好，对子元素的影响不大；
如果是移动端项目可以使用 第2、第4种方法，布局方便，也容易理解，对子元素的影响不大；而其他方案都设置了一些基于文本属性的样式，因为文本属性具有继承性，所以子元素在使用其他的文本属性的时候，就需要去设置覆盖父元素的属性设置。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
