One. Horizontal and vertical center
1. Absolute positioning + negative margin
HTML
<div class="parent">
<div class="child">A piece of text a piece of text a piece of text a piece of text a piece of text a piece of text</div>
</div>
Copy the code
CSS
.parent {
height: 500px;
border: 1px solid red;
position: relative;
}
.child {
width: 300px;
height: 100px;
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px; /* -50% of the width */
margin-top: -50px; /* -50% of the height */
}
Copy the code
Disadvantages: Need to fix the width and height of the center element.
2. Absolute positioning + margin: Auto
HTML
<div class="parent">
<div class="child">A piece of text a piece of text a piece of text a piece of text a piece of text a piece of text</div>
</div>
Copy the code
CSS
.parent {
height: 500px;
border: 1px solid red;
position: relative;
}
.child {
border: 1px solid green;
width: 300px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Copy the code
Disadvantages: Need to fix the width and height of the center element, otherwise the width and height will be set to 100%
3. Translate
HTML
<div class="parent">
<div class="child">A piece of text a piece of text a piece of text a piece of text a piece of text a piece of text</div>
</div>
Copy the code
CSS
.parent {
height: 500px;
border: 1px solid red;
position: relative;
}
.child {
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Copy the code
Advantages: No need to fix the width and height of the center element.
4. The flex layout
HTML
<div class="parent">
<div class="child">A piece of text a piece of text a piece of text a piece of text a piece of text a piece of text</div>
</div>
Copy the code
CSS
.parent {
height: 500px;
border: 1px solid red;
display: flex;
justify-content: center; /* Horizontal center */
align-items: center; /* Vertical center */
}
.child {
border: 1px solid green;
width: 300px;
}
Copy the code
Advantages: No need to fix the width and height of the center element.
Compatibility: Flex layouts are now fully available on mobile, while some older browsers on PC are not as well supported.
5. Center a single line of text horizontally and vertically
HTML
<p class="content">Single line of text Single line of text</p>
Copy the code
CSS
.content {
border: 3px solid red;
line-height:300px;
text-align:center;
}
Copy the code
Two. Horizontal center
1. margin auto
HTML
<div class="parent">
<div class="child">A piece of text a piece of text a piece of text a piece of text a piece of text a piece of text</div>
</div>
Copy the code
CSS
.parent {
border: 3px solid red;
}
.child {
border: 3px solid blue;
width: 300px;
margin: 0 auto;
}
Copy the code
Disadvantages: Need to fix the width of the center element.
2. text-align + inline-block
HTML
<div class="parent">
<div class="child">A piece of text a piece of text a piece of text a piece of text a piece of text a piece of text</div>
</div>
Copy the code
CSS
.parent {
border: 3px solid red;
text-align: center;
}
.child {
border: 3px solid blue;
width: 300px;
display: inline-block;
text-align:left; /* Resets text position */
}
Copy the code
Disadvantages: To center the element, the text is also centered, so you may need to reset the text position.
Three. Vertical center
1. Table has built-in functions
HTML
<table class="parent">
<tr>
<td class="child">A paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph A paragraph of text a paragraph of text a paragraph of text a paragraph of text a paragraph of text</td>
</tr>
</table>
Copy the code
CSS
.parent {
border: 1px solid red;
height: 600px;
}
.child {
border: 1px solid green;
}
Copy the code
2. Div disguised as table
HTML
<div class="table">
<div class="td">
<div class="child">A paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph A piece of writing</div>
</div>
</div>
Copy the code
CSS
div.table {
display: table;
border: 1px solid red;
height: 500px;
}
div.tr {
display: table-row;
border: 1px solid green;
}
div.td {
display: table-cell;
vertical-align: middle;
border: 1px solid blue;
}
.child {
border: 3px solid black;
}
Copy the code
3. 100% height after before plus inline-block
HTML
<div class="parent">
<div class="child">A piece of text a piece of text a piece of text a piece of text a piece of text a piece of text</div>
</div>
Copy the code
CSS
.parent {
border: 3px solid red;
height: 500px;
text-align: center;
}
.child {
border: 3px solid black;
display: inline-block;
width: 300px;
vertical-align: middle;
}
.parent::before {
content: ' ';
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.parent::after {
content: ' ';
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
Copy the code