当前位置：网站首页>(4) summary of methods to realize vertical centering

(4) summary of methods to realize vertical centering

2022-04-22 06:44:00 【Zhou zhouchi】

If the parent element's `height` Don't write , Just set the parent element `padding:10px 0;` You can center the child elements vertically ; If the parent element's `height` It's dead , It's more difficult to center vertically , Here are some ways to center vertically .

1. Use `table` The built-in function realizes vertical centering .

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table class="parent">
    <tr>
      <td class="child">
       A string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text String of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters Text a string of text a string of text 
      </td>
    </tr>
  </table>
</body>
</html>

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

.child{
    
  border: 1px solid green;
}

Insert picture description here

2. hold `div` Pretend to be `table` Achieve vertical centering .

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="table">
      <div class="td">
        <div class="child">
           A string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text a string of text String of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters a string of characters Text a string of text a string of text 
        </div>
    </div>
  </div>
</body>
</html>

div.table{
    
  display: table;
  border: 1px solid red;
  height: 600px;
}
div.td{
    
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.child{
    
  border: 1px solid black;
}

Insert picture description here

Use display：table Take the first one. div Turn into table, Use display:table-cell Put the second one div Turn into tr, utilize table The built-in function realizes vertical centering .

3. Use absolute positioning +`transform: translate(-50%,-50%);`

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
       A string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words 
       A string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words 
       A string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words 
       A string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words 
    </div>
  </div>
</body>
</html>

    .parent{
    
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
    
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Insert picture description here

The parent element uses relative positioning , Sub elements use absolute positioning , Set child elements top: 50%;left: 50%;transform: translate(-50%,-50%);, Complete horizontal and vertical centering relative to parent element

4. Use `flex` Layout

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
       A string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words a string of words 
    </div>
    
  </div>
</body>
</html>

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

Insert picture description here

flex It's the best , Set... In the parent element justify-content: center;align-items: center;, This completes the horizontal and vertical centering of the child elements

版权声明
本文为[Zhou zhouchi]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204220557472183.html