Let’s see how to achieve “vertical center”?

Hi, I’m Hone. Today I went out of my way to learn how to achieve vertical center, so I made a note in case I forgot. (In fact, I still can’t understand why memorize so much at first =-=)

1. Use margin-top: -50%

I’m not going to show you the HTML, I’m going to go straight to the CSS

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

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

2. transform: translate(-50%,-50%)

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

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

3. Use Absolute Margin Auto

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

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

4. The flex layout

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

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

5. Use Grid layout

<div class="parent">
    <div class="child"></div>
    <div class="child-center"></div>
    <div class="child"></div>
</div>
Copy the code

.parent
{
  width: 400px;
  height: 300px;
  display: grid;
}

.child
{
  background: #bd1000;
}

.child-center
{
  background: #ddd;
}
Copy the code

6. Use line-height = height

.box
{
  width: 400px; 
  height: 300px; 
  background: #ddd; 
  line-height: 300px;
}
Copy the code

7. Use the padding

.parent 
{
  width: 400px;
  background: #bd1000;
  padding: 100px 0;
} 

.child 
{
  height: 100px;
  background: #ddd;
}
Copy the code

8. Table has built-in functions

<table class="parent">
  <tr>
    <td class="child">The magic of time is that when you focus on one thing, it returns to you not just a qualitative change from zero to one, but a qualitative change to the NTH power.</td>
  </tr>
</table>
Copy the code

9. 100% height afrer before plus inline block

  <div class="parent">
    <div class="child">The magic of time is that when you focus on one thing, it returns to you not just a qualitative change from zero to one, but a qualitative change to the NTH power.</div>
  </div>
Copy the code

.parent
{
  border: 3px solid red;
  height: 600px;
  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

Div as table

  <div class="table">
      <div class="td">
        <div class="child">The magic of time is that when you focus on one thing, it returns to you not just a qualitative change from zero to one, but a qualitative change to the NTH power.</div>
    </div>
  </div>
Copy the code

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

div.td
{
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.child
{
  border: 10px solid black;
}
Copy the code

Why aren’t there pictures? That of course is some brain to think to know =-= that some can’t think of? Knock once, knock more and you will know \