A couple of ways to center a div horizontally.
Article directory
1. Margin
In the first way, we can use the margin property to center the div horizontally and vertically
First look at a piece of problematic code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 父容器样式 */
.container{
height: 800px;
background-color: black;
}
/* 子容器样式 */
.son{
width: 300px;
height: 300px;
background-color: white;
/* 水平垂直居中 */
margin: 250px auto;
}
</style>
</head>
<body>
<!-- 父容器 -->
<div class="container">
<!-- 子容器 -->
<div class="son"></div>
</div>
</body>
</html>
Effect
It can be seen that setting the top margin for the child container will squeeze the parent container down. This is because the margin attribute will only "stop" when it encounters the boundary. The border is the border attribute or the padding attribute. Because the parent container has no border, the outer margin of the child container is relative to the parent container of the parent container, that is, the body. So if we want to vertically center the child container relative to the parent element, we need to set a padding or border for the parent element.
correct code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 父容器样式 */
.container{
height: 800px;
background-color: black;
border: 1px solid;
/* padding: 1px; */
}
/* 子容器样式 */
.son{
width: 300px;
height: 300px;
background-color: blue;
/* 水平垂直居中 */
margin: 250px auto;
}
</style>
</head>
<body>
<!-- 父容器 -->
<div class="container">
<!-- 子容器 -->
<div class="son"></div>
</div>
</body>
</html>
margin: upper and lower margins, left and right margins;
to center the div horizontally, set the left and right margins to auto, adaptive.
To center the div vertically, it is necessary to calculate the top and bottom margins, which are half the height of the parent container minus half the height of the child container.
2. Absolute positioning
correct code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 父容器 */
.container{
height: 700px;
position: relative;
background-color: black;
}
/* 子容器 */
.son{
width: 300px;
height: 300px;
background-color: white;
position:absolute;
/* 水平垂直居中 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="son"></div>
</div>
</body>
</html>
As long as the sub-container is enabled with absolute positioning, and the left, right, top, and bottom are all 0, margin:auto can realize the horizontal and vertical centering of the div.
3. Absolute positioning of child elements Relative positioning of parent elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子绝父相</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 父容器 */
.container{
height: 700px;
background-color: black;
/* 父容器开启相对定位*/
position: relative;
}
/* 子容器 */
.son{
width: 300px;
height: 300px;
background-color: white;
/* 子容器开启绝对定位*/
position:absolute;
/* 水平垂直居中 */
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="container">
<div class="son"></div>
</div>
</body>
</html>
Enable relative positioning for the parent container and absolute positioning for child elements.
Horizontally centered left: 50%; margin-left: -150px;
vertically centered top: 50%; margin-top: -150px;
The value of margin is the negative value of half the width or height of the sub-container.
We generally use left in the horizontal direction and vertical direction Generally use top to avoid problems.
Four, flex layout
correct code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 父容器 */
.container{
height: 700px;
background-color: black;
/* 父容器开启flex布局 */
display: flex;
/* 水平垂直居中 */
justify-content: center;
align-items: center;
}
/* 子容器 */
.son{
width: 300px;
height: 300px;
background-color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="son"></div>
</div>
</body>
</html>
Enable flex layout for the parent container, the parent container becomes a flex container, and the child container becomes a flex item.
Use the flex layout to control the horizontal and vertical alignment of the item to center the div vertically and horizontally.
justify-content: center; horizontally centered
align-items: center; vertically centered
Summarize
It may be that the description is not clear, but it is good to be able to understand.
Original reference: https://blog.csdn.net/qq_57443373/article/details/120179047