前端随心记---------面试题

1.在父元素中水平垂直居中
 
<div class="box">
<div class="inner">
</div>
</div>
 
.box{
display: flex;
justify-content: center;/* 水平居中 */
align-items: center;/* 垂直居中 */
width: 500px;
height: 500px;
border: 1px solid red;
}
.inner{
width: 200px;
height: 200px;
background-color: red;
}
 
2.始终在屏幕水平垂直居中
 
.box{
width: 100px;
height: 100px;
background:red;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
 
3.始终在屏幕水平垂直居中
 
.box{
width:200px;
height: 200px;
background:red;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
} 
 
 
 
 
 
4.始终在屏幕水平垂直居中
 
.box{
width: 600px;
height: 600px;
background: red;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
 
5.实现文字水平居中
 
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
} 

垂直居中的五种方案