This paper mainly introduces various methods of horizontal centering, vertical centering and horizontal centering. The mind map is as follows:
1, Horizontal center
1. The elements in the line are centered horizontally
Use text align: Center; You can center the elements horizontally within the row within the block level elements. This method works for horizontal centering of inline, inline block, inline table, and inline flex elements.
.parent { /*Set in parent container*/
text-align: center;
}In addition, if the block level element is also a block level element, we can first change it from a block level element to an inline block element, and then set the inline block element to be centered to achieve horizontal centering.
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
text-align: center;
}
.child {
display: inline-block;
}
</style>2. Horizontal centering of block level elements
This situation can be implemented in many ways. Let's introduce it in detail below:
(1) Set the margin left and margin right of the block level element to auto
.child {
width: 100px; /*Ensure that the block level element is fixed width*/
margin: 0 auto;
}(2) Use table + margin
Set the child element to be displayed as a block level table (similar), and then set it to be horizontally centered
display: table; It is similar to the block element in appearance, but the width is the width of the content
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>(3) Use absolute + transform
First set the parent element to relative positioning, then set the child element to absolute positioning, move the element to the right by half the distance of the parent container, and finally move the child element to the left by half the width to achieve horizontal centering
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.parent {
position: relative;
}
</style>However, transform belongs to css3 content. There must be some compatibility problems. Higher version browsers need to add some prefixes.
(4) Use flex + justify content
Achieve horizontal centering through the justify content attribute in flex, a layout tool in CSS3
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: flex;
justify-content: center;
}
</style>(5) Use flex + margin
Set the parent container to flex layout through flex, and then center the child elements.
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
}
.child {
margin: 0 auto;
}
</style>3. Multiple block level elements are horizontally centered
(1) Using flex layout
The elastic layout (flex) is used to realize horizontal centering. The justify content is used to set the alignment of the elastic box elements in the direction of the main axis (default horizontal axis). In this example, the child elements are set to be displayed horizontally and centered.
#container {
display: flex;
justify-content: center;
}(2) Using inline block
Set the block elements to be arranged horizontally as display: inline block, and then set text align: Center on the parent element to achieve the same effect as the horizontal center of the above in-line elements
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}4. Floating elements are horizontally centered
- For fixed width floating elements, set relative + negative margin through child elements
- For floating elements of variable width, parent and child containers are positioned relative to each other
- General method (whether fixed width or variable width): flex layout
(1) Fixed width non floating element
Set relative + negative margin through child elements. The principle is as follows:
Note: the style is set in the floating element itself
.child {
position: relative;
left: 50%;
margin-left: -250px;
}
<div>
<span class="child" style="float: left; width: 500px;">I'm a floating element to center</span>
</div>(2) Floating element of variable width
Through the relative positioning of parent and child containers, the offset displacement is shown as follows:
Note: to clear the float, add float to the external element. The parent element here is the external element.
<div class="box">
<p>I'm floating</p>
<p>I'm also in the middle</p>
</div>
<style>
.box {
float: left;
position: relative;
left: 50%;
}
p {
float: left;
position: relative;
right: 50%;
}
</style>(3) General method flex layout (whether fixed width or variable width)
Use the justify content attribute of flex to achieve horizontal centering.
.parent {
display: flex;
justify-content: center;
}
.child {
float: left;
width: 200px; /*The presence or absence of width does not affect the centering*/
}
<div>
<span class="child">I'm a floating element to center</span>
</div>5. The absolute positioning element is horizontally centered
This method is very unique. It is absolutely positioned by sub elements, plus margin: 0 auto; To achieve
<div class="parent">
<div class="child">Center the absolutely positioned elements horizontally</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute; /*Absolute positioning*/
width: 200px;
height: 100px;
background: yellow;
margin: 0 auto; /*horizontally*/
left: 0; /*It cannot be omitted here and is 0*/
right: 0; /*It cannot be omitted here and is 0*/
}
</style>2, Vertical center
1. Single line inline elements are vertically centered
<div id="box">
<span>Single line inline element centered vertically</span>
</div>
<style>
#box {
height: 200px;
line-height: 120px;
border: 2px dashed #f69c55;
}
</style>2. Multiple inline elements are centered vertically
(1) Using flex layout (Flex)
The flex layout is used to realize vertical centering. The flex direction: column defines the spindle direction as vertical. This method has compatibility problems in older browsers
<div>
<p>
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
</p>
</div>
<style>
.parent {
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px dashed #f60c55;
}
</style>(2) Use table layout (table)
The vertical align: middle of table layout can be used to realize the vertical centering of child elements
<div class="parent">
<p class="child">
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
</p>
</div>
<style>
.parent {
display: table;
height: 140px;
border: 2px dashed #f69c55;
}
.child {
display: table-cell;
vertical-align: middle;
}
</style>3. Block level elements are vertically centered
(1) Use absolute + negative margin (known height and width)
This can be achieved by absolutely positioning the element 50% from the top and setting margin top to offset half of the element height upward
<div class="parent">
<div class="child">Fixed height block level elements are centered vertically</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
</style>(2) Use absolute + transform
When the height and width of the vertically centered element are unknown, you can use the transform attribute in CSS3 to reverse offset the Y axis by 50%. However, some browsers have compatibility problems.
<div class="parent">
<div class="child">Block level elements of unknown height are vertically centered</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>(3) Use flex + align items
Center the child elements vertically by setting the align items attribute in the flex layout
<div class="parent">
<div class="child">Block level elements of unknown height are vertically centered</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>(4) Use table cell + vertical align
Display by converting the parent element into a table cell (similar to < td> and < Th >), and then set Vertical align property to center the table cell contents vertically.
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>3, Horizontal vertical center
Method 1: absolute positioning and negative margin (known height and width)
In this way, you need to know the height and width of the vertically centered element in order to calculate the margin value, which is compatible with all browsers.
/*css part*/
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}/*html Part (this part is not changed, and the following examples are directly shared)*/
<body>
<div id='container'>
<div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
</div>
</body>Method 2: absolute positioning and margin:auto (known height and width)
This method does not need to know the height and width of the vertically centered element, but it is not compatible with lower versions of IE browsers.
#container {
position: relative;
height:100px; /*Must have a height*/
}
#center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; /*Pay attention to the wording here*/
}Method 3: absolute positioning + CSS3 (height and width of unknown element)
Using Css3's transform, you can easily realize the vertical centering of elements when the height and width of elements are unknown.
CSS3 transform is easy to use, but compatibility must be considered in the actual application of the project. A large amount of hack code may lead to more gains than losses.
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Method 4: flex layout
Using flex layout, where justify content is used to set or retrieve the alignment of elastic box elements in the main axis (horizontal axis) direction; The align items attribute defines the alignment of flex children in the direction of the side axis (vertical axis) of the current row of the flex container. It is not compatible with lower versions of IE browser.
#Container {/ * can be set directly in the parent container*/
height: 100px; /*Must have height*/
display: flex;
justify-content: center;
align-items: center;
}Method 5: flex/grid and margin: Auto (the simplest way)
The container element is set to flex layout or grid layout. The child element can only write margin: auto. It is not compatible with lower versions of IE browsers.
#container {
height: 100px; /*Must have height*/
display: grid;
}
#center {
margin: auto;
}