If the height of the. Parent is not written, you just need the padding: 10px 0; You can center.child vertically; If the height of the.parent is dead, it is difficult to center the.child

Advice: don’t write death height if you can

The demo link

  1. Table built-in functions
  2. Div “disguised” as table
  3. 100% height after before plus inline-block
  4. margin-top: -50%
  5. translate: -50%
  6. Absolute, top, bottom, left and right 0, margin: auto
  7. The ultimate method — Flex
  8. There are other ways to search online, but that’s enough

Method 1: Table has built-in functions

With the table tag, there are built-in features to center elements vertically

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Use the table attribute to achieve vertical center</title>
</head>
<body>
  <table class="parent">
    <tr>
      <td class="child">Content content Content content content content content content content content content content content content content content content content Content Content Content content content content content content content content content content content</td>
    </tr>
  </table>
</body>
</html>
Copy the code

CSS

.parent {
  border: 4px solid red;
  height: 600px;
}

.child {
  border: 4px solid green;
}
Copy the code

The demo link

Method 2: Disguise div as table

This method sets the parent element display to table and the child element display to table-cell

Isn’t it very naughty?

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Div camouflaged table is vertically centered</title>
</head>
<body>
  <div class="table">
    <div class="td">
      <div class="child">Content region Content region Content region Content region Content region content region content region content region content region content region content region content region content region Content region Content region Content region Content region Content region content region content region content region content region content region content region content region content region Content region Content region Content region Content region Content region content region content region content region content region content region content region content region content region</div>
    </div>
  </div>
</body>
</html>
Copy the code

CSS

.table {
  display: table;
  border: 10px solid red;
  height: 600px;
}

.td{
  display: table-cell;
  border: 10px solid blue;
  vertical-align: middle;
}

.child{
  border: 10px solid black;
}
Copy the code

The demo link

Method 3:1000% height after before plus inline-block

This is hard to think of, with both sides of the pole to squeeze the content into the middle

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>100% height afrer before plus inline block</title>
</head>
<body>
  <div class="parent">
    <div class="child">This is the content that is content that is content that is content that is it this is the content that is content that is content This is the content that is content that is content that is content that is it this is the content that is content that is content This is the content that is content that is content that is content that is it this is the content that is content that is content This is the content that is content that is content that is content that is it this is the content that is content that is content This is the content that is content that is content that is content that is it this is the content that is content that is content This is the content that is content that is content that is content that is it this is the content that is content that is content This is content this is content this is content this is content this is content this is content this is content this is content this is content</div>
  </div>
</body>
</html>
Copy the code

CSS

.parent {
  border: 4px solid blue;
  height: 600px;
  text-align: center;
}

.child {
  border: 4px solid green;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent:before {
  content: ' ';
  outline: 4px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.parent:after {
  content: ' ';
  outline: 4px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
Copy the code

The demo link

Margin-top: -50%

Use absolute positioning

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Margin-top: -50% vertical center</title>
</head>
<body>
  <div class="parent">
    <div class="child">Content area Content area Content area Content area Content area Content area Content area content area content area content area</div>
  </div>
</body>
</html>
Copy the code

CSS

.parent {
  height: 600px;
  border: 4px solid red;
  position: relative;
}

.child {
  border: 4px solid green;
  width: 300px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -50px;
}
Copy the code

The demo link

Translate: -50%

Absolute positioning, set the left and right of child elements to 50%, and add transform: translate(-50%,-50%);

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>-50% is vertically centered</title>
</head>
<body>
  <div class="parent">
    <div class="child">Content area Content area Content area Content area Content area Content area Content area Content area</div>
  </div>
</body>
</html>
Copy the code

CSS

.parent {
  height: 600px;
  border: 4px solid red;
  position: relative;
}

.child {
  border: 4px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

The demo link

Method 6: Absolute Margin Auto

Margin: auto; margin: auto;

HTMl

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Absolute Margin Auto implements vertical center</title>
</head>
<body>
 <div class="parent">
   <div class="child">Content region Content region Content region Content region Content region Content region content region content region content region content region</div>
 </div>
</body>
</html>
Copy the code

CSS

.parent {
  height: 600px;
  border: 4px solid red;
  position: relative;
}

.child {
  border: 4px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
Copy the code

The demo link

Method 7: The ultimate method — Flex

The easiest way to do it. The top one takes so much work

display: flex;
justify-content: center;
align-items: center;
Copy the code

HTML

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex implements vertical centering</title>
</head>
<body>
  <div class="parent">
    <div class="child">Content area Content area Content area Content area Content area Content area Content area Content area</div>
  </div>
</body>
</html>
Copy the code

CSS

.parent {
  height: 600px;
  border: 4px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.child {
  border: 4px solid green;
  width: 300px;
}
Copy the code

The demo link