1. Origin of the problem
How to center has always been an interesting problem in front-end development, and it is estimated that everyone who does front-end development can tell several methods. But I don’t know if you’ve ever thought about what’s going on behind that. Next, I will use this blog to expound my opinion on using margin centralization.
2, how to center
Horizontal center
First, let’s talk about the middle case. Margin :0 auto margin:0 Auto
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.center {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body style="border: 1px solid black;">
<div class="center">
hello world
</div>
</body>
</html>
Copy the codeThe results are as follows
.center {
margin:0 auto;
/*width: 300px; * /
height: 300px;
/*background-color: red; * /
}
Copy the codeSo it looks like this
Use the principle of maring:0 auto center
This involves a noun: landscape formatting properties. So what is a landscape formatting property? It contains seven attributes: margin-left, border-left-width, padding-left, width, padding-rigth, border-right-width, margin-right. These seven attributes affect the horizontal layout of the block-level box. Their seven values add up to the block width of the element, which is usually the width of the block parent element. It is expressed by the formula:
margin-left + border-left-width + padding-left + width + padding-rigth + border-right-width + margin-righ = width
Copy the codeOnly three of the seven values can be set to auto: margin-left, margin-right, and width. If one of these values is set to auto and the other two values are set to specific values, then the length of the attribute set to auto must be such that the width of the element box is equal to the width of the parent element. That satisfies that equation. So you might be thinking, what if I set two of them to Auto? Let’s discuss this situation:
- If margin-left and margin-right are set to auto and width is set to a specific value, then the two margins are equal in length. Specifically, the element is centered in the parent element, which is the horizontal center effect we want.
- Set the margin and width of one side to auto, and set the margin to auto to 0. The width is calculated by the equation. Here’s a simple example:
.center { margin-left: 100px; margin-right: auto; width: auto; height: 300px; background-color: red; } Copy the code
If we set margin-right to auto, it will be 0. Since border and padding are not set, they default to 0, so width+margin-left should be equal to the width of the parent element. In this case, my parent element is body. Margin-left equals 100px and the div takes up the rest of the space, as shown in the figure below
So there’s another case where we set all three values to auto, and we set the left and right margins to 0, and width is as wide as we want it to be. In fact, this is what we show when we remove the width from the top. Because the default width is auto when you remove the width, and you set the left and right margins to auto, then the left and right margins naturally become 0, which is why the center fails. And then you might be thinking, well, if I don’t set any auto, if I set all auto, doesn’t that equation work? This is called an overconstraint in CSS, and margin-right is forced to be auto in this case.
Vertical center
With horizontal centering in mind, let’s now talk about vertical centering. Given your horizontal centring experience, it’s tempting to think, wouldn’t I just center it vertically and set it to Margin: Auto 0? Is that true? Let’s give it a try
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.center {
margin: auto 0;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="center">
hello world
</div>
</body>
</html>
Copy the codeHe produced the following effect:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="center"></div>
</div>
</body>
</html>
Copy the codeWhen we add absolute positioning to the center element and set all its values to zero, something magical happens:
top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = height
Copy the codeIn the above formula, top and bottom are set to 0, and margin is equal to auto. At this time, the browser will evenly distribute the upper and lower distances to margin to satisfy this equation, that is, to achieve the desired center effect. And the same thing is true for landscape, so we can see that this element is centered horizontally and vertically, and if there’s a constraint, we ignore the right property. Ok, so that’s my thoughts on how margin:0 Auto centralizes elements. Here are some other ways to centralize them.
3. Other centers
- Use absolute positioning + negative margin, which needs to know the height of the child element
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="father">
<div class="center">
<span style="line-height: 100px">hello world</span>
</div>
</div>
</body>
</html>
Copy the code- Relative position +transform, this case does not need to know the height of the child element
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
position: relative;
height: 500px;
width: 500px;
background-color: blue;
}
.center {
position: relative;
top: 50%;
width: 200px;
height: 200px;
background-color: red;
transform: translateY(50%); }</style>
</head>
<body>
<div class="father">
<div class="center">hello</div>
</div>
</body>
</html>
Copy the code- Using Flex layout
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 500px;
background-color: blue;
}
.center {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="center">hello</div>
</div>
</body>
</html>
Copy the code- Inline elements set line-height to center the parent element’s height
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
}
.center {
line-height: 500px;
}
</style>
</head>
<body>
<div class="father">
<span class="center">hello</span>
</div>
</body>
</html>
Copy the code- Set text-align:center for the parent element
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
text-align: center;
background-color: red;
}
.center {
line-height: 500px;
}
</style>
</head>
<body>
<div class="father">
<span class="center">hello</span>
</div>
</body>
</html>
Copy the code- Set vertical-align:middle to center the image and text
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.center {
vertical-align: middle;
}
</style>
</head>
<body>
<img class="center" src="buct.jpg" alt="" width="100px" height="100px"><span>hello world</span>
</body>
</html>
Copy the codeWell, that’s all for this blog post, please point out any mistakes.