Interview questions sometimes emphasize whether the width and height of the subbox are known. Please pay attention to this.
Try one: Set padding for the parent box or margin for the child box
<style>
.father{
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹现象，不信你删了试试 */
background-color: #db7b7b;
}
.son{
width: 100px;
height: 100px;
margin: auto;
background-color: #d8db7b;
}
</style>
<body>
<div class="father">
<div class="son">aa</div>
</div>
</body>
Failed, it can only be centered horizontally, not vertically! ! ! ! ! ! !
Reason
http://t.csdn.cn/AOMJ1
http://t.csdn.cn/cFsg6
Why doesn't margin:auto center vertically?
margin:auto is a keyword with strong calculation meaning, which is used to calculate the value that should be obtained in the corresponding direction of the element.remaining spacesize.
Inline elements margin:auto; cannot be horizontally centered in the center of a row (inline elements do not occupy an exclusive row).
Block-level elements still occupy one line of space after setting the width, so margin:auto; will evenly distribute the remaining space of this line to the left and right margins.
margin:auto can center block-level elements horizontally, but not vertically because there is no remaining space in the vertical direction by default.
Note: Inline elements with margin:auto can neither be centered horizontally nor vertically, because there is no remaining space for inline elements in both horizontal and vertical directions by default.
Solution 1: The son has the same shape as the father + margin: auto + all sides are 0 (the son has width and height
<style>
.father{
position: relative; /* !!!! */
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹现象，不信你删了试试 */
background-color: #db7b7b;
}
.son{
position: absolute; /* !!!! */
width: 100px;
height: 100px;
/* !!!! */
top:0;
left:0;
bottom:0;
right:0;
margin: auto;
background-color: #d8db7b;
}
</style>
<body>
<div class="father">
<div class="son">aa</div>
</div>
But this situation does not apply to the case where the child box has variable width and height . For example, the child box will fill the entire parent box.
Attempt 2: Son’s absolute father’s appearance+margin-top/left:50%+transform
The width and height of the subbox are known
<style>
.father{
position: relative; /* !!!! */
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹现象，不信你删了试试 */
background-color: #db7b7b;
}
.son{
position: absolute; /* !!!! */
width: 100px;
height: 100px;
/* !!!! */
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%,-50%);
background-color: #d8db7b;
}
</style>
<body>
<div class="father">
<div class="son">aa</div>
</div>
</body>
If you think this method can be universal, you are wrong, because
marginAndpaddingwhether left or right or top or bottom are relative toparent elementofwidthIf not, find the width of its parent element. If no width is set, it will be relative to the width of the screen.
http://t.csdn.cn/Pwcy6
http://t.csdn.cn/YSubI
So, try one, add padding to the parent box, it doesn’t work at all. The padding of the parent box refers to the size of the body, so the parent box is expanded, so don’t try
padding!!!
Solution 2: The child has the same shape as the parent + margin-left/top: half of the parent box + transform (the child has a fixed width and height
<style>
.father{
position: relative;
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹现象，不信你删了试试 */
background-color: #db7b7b;
}
.son{
position: absolute;
width: 100px;
height: 100px;
/* !!!! */
margin-top: 100px;
margin-left: 150px;
transform: translate(-50%,-50%);
background-color: #d8db7b;
}
</style>
<body>
<div class="father">
<div class="son">aa</div>
</div>
</body>
Solution 3: The son has the same shape as the father+top/left:50%+transform (the width and height of the son are not determined)
Subboxes can have variable width and height
<style>
.father{
position: relative; /* !!!! */
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹现象，不信你删了试试 */
background-color: #db7b7b;
}
.son{
position: absolute; /* !!!! */
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #d8db7b;
}
</style>
Solution 4: The son must be the same as the father +top/left:50%+magin-top/left: half of the child (the width and height of the child are known
That is to say , transform: translate(-50%,-50%); replace it with margin-top: -50px;margin-left: -25px;So, the width and height of the subbox are known
<style>
.father{
position: relative;
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹现象，不信你删了试试 */
background-color: #db7b7b;
}
.son{
position: absolute;
width: 50px; /* !!!! */
height: 100px;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%); */
margin-top: -50px;
margin-left: -25px;
background-color: #d8db7b;
}
</style>
flex
The parent box flex layout and set justify-content: center; align-items: center;
<style>
.father{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-color: #db7b7b;
}
.son{
background-color: #d8db7b;
}
</style>
table - cell
Set the parent box to display: table-cell; and set text-align: center; vertical-align: middle; and set the child box to display: inline-block;
http://t.csdn.cn/cmr2B
<style>
.father{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 300px;
height: 200px;
background-color: #db7b7b;
}
.son{
display: inline-block;
background-color: #d8db7b;
}
</style>
grid
The parent box is set to the grid element display: grid; and place-items: center;
<style>
.father{
display: grid;
place-items: center;
width: 300px;
height: 200px;
background-color: #db7b7b;
}
.son{
background-color: #d8db7b;
}
</style>
Summarize:
1. The test method requires multiple chestnuts. You cannot only test squares. In this way, you will not be able to find the margin according to the width of the parent.
2. The width and height of the child box are not fixed , and can only be set top/left:50%. Margin-left:50% cannot be set, because top/left:50%unlike margins, all refer to the width of the parent.
