The effect style diagram is as follows:
Method 1: Use positioning and transform methods to center
Description: First, use the method of absolute positioning of the child element in positioning and relative positioning of the parent element. Top:50% and left:50% will make the child element move down 250px in the parent element and 250px to the right. The child element is due to It has a height and a width, which will cause the child element to not be completely centered. The translate attribute in the transform can make the child element move up and to the left with its own height, in order to achieve the effect of vertical and horizontal centering.
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
Method 2: Calculate the horizontal and vertical center distance to locate the element
Note: The difference between method two and method one is that the distance between the child element and the parent element needs to be calculated. From the height and width, the child element needs to be moved 150px down and to the right, and 30% (150px/500px) is used for positioning. Of course You can use top and left: 150px or it can be centered horizontally and vertically.
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 30%;
left: 30%;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
Method 3: Use the margin to set the value and top method
Explanation: The difference from method one is that the outer margin is used to move the position of the child element. The values of margin-top and margin-left are the negative values of half the height and width of the child element.
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
Method 4: Use top and margin as auto method
Note: When top, bottom, left, and right are set to 0, the child element will be displayed at the initial position on the parent element due to its insufficient width and height. However, setting the margin to auto will place the child element in the parent respectively. The margin in the element is set to the horizontal and vertical centered distance
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
Method 5: Use flex layout method (recommended)
Note: When box1 is set as a flexible box, box2 will be out of the document flow. Use justify-content and align-items to set to center to center horizontally and vertically. Flex layout does not need to calculate the distance when centered
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
Method 6: Isolate parent and child elements to set margins
Note: In the case of setting the margins for box2 separately, the problem of margin overlap will occur. You can add an empty table in front of box1 to separate box1 and box2, so that you can set the outer margins for the child element box2 separately to achieve vertical horizontality The effect of centering.
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
margin-top: 150px;
margin-left: 150px;
}
.box1::before{
content: "";
display: table;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
Method 7: Convert the parent element to table-cell type
Description: Convert the parent element box1 to the table-cell type, and set the vertical-align to the centered state to achieve the horizontal centering effect. If the child element is a block-level element such as div, it needs to be converted to the inline-block type, and set the text-align to The centered state can achieve the effect of vertical centering
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
display: inline-block;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>