最近面试，总是遇到实现水平垂直居中，写出来记录下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout布局</title>
<style>
.parent,.parent_transform,.parent_flex,.parent_absolute_auto{
display: table;
width:200px;
height: 200px;
border:1px solid red;
margin-bottom: 20px;
}
.child{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.parent_transform{
display: block;
position: relative;
}
.child_transform{
display: block;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.parent_flex{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.parent_absolute_auto{
display: block;
position: relative;
}
.child_absolute_auto{
/* 子元素需要指定width height */
width:20%;
height: 20%;
position: absolute;
margin:auto;
text-align: center;
top:0;
bottom:0;
left:0;
right: 0;
}
</style>
</head>
<body>
<!-- table -->
<div class="parent">
<div class="child">铁子</div>
</div>
<!-- tansform -->
<div class="parent_transform">
<div class="child_transform">铁子</div>
</div>
<!-- flex -->
<div class="parent_flex">
<div class="child_flex">铁子</div>
</div>
<div class="parent_absolute_auto">
<div class="child_absolute_auto">铁子</div>
</div>
</body>
</html>
网友评论