1. 单行文本在div内居中

  • line-height 等于父元素高度
  • text-align: center; 水平居中

image.png

2. table自动居中

  1. <body>
  2.   <table class="parent">
  3.     <tr>
  4.       <td class="child">
  5.       一串文字一串文字一串文字一串文字
  6.       </td>
  7.     </tr>
  8.   </table>
  9. </body>
  1. .parent{
  2.   border: 1px solid red;
  3.   height: 600px;
  4. }
  6. .child{
  7.   border: 1px solid green;
  8.   /* 默认是vertical-align: middle; */
  9. }

3. 用div伪装table

  1.   <div class="table">
  2.       <div class="td">
  3.         <div class="child">
  4.           一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
  5.         </div>
  6.     </div>
  7.   </div>
  1. div.table{
  2.   display: table;
  3.   border: 1px solid red;
  4.   height: 600px;
  5. }
  7. div.td{
  8.   display: table-cell;
  9.   border: 1px solid blue;
  10.   vertical-align: middle;
  11. }
  12. .child{
  13.   border: 10px solid black;
  14. }

4. 绝对定位 margin-top和margin-left分别等于自身height和width的一半

  1. <body>
  2.   <div class="parent">
  3.     <div class="child">
  4.       一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
  5.     </div>
  6.   </div>
  7. </body>
  1. .child{
  2.   border: 1px solid green;
  3.   width: 300px;
  4.   position: absolute;
  5.   top: 50%;
  6.   left: 50%;
  7.   margin-left: -150px;
  8.   height: 100px;
  9.   margin-top: -50px;
  10. }

注意： 如果margin-left: -50%; 是父元素的50%，不是自身

5. 绝对定位，transform: translate(-50%, -50%)

  1. .parent{
  2.   height: 600px;
  3.   border: 1px solid red;
  4.   position: relative;
  5. }
  6. .child{
  7.   border: 1px solid green;
  8.   position: absolute;
  9.   top: 50%;
  10.   left: 50%;
  11.   transform: translate(-50%,-50%);
  12. }

6. 绝对定位，margin: auto

  1. .parent{
  2.   height: 600px;
  3.   border: 1px solid red;
  4.   position: relative;
  5. }
  6. .child{
  7.   border: 1px solid green;
  8.   position: absolute;
  9.   width: 300px;
  10.   height: 200px;
  11.   margin: auto;
  12.   top: 0;
  13.   bottom: 0;
  14.   left: 0;
  15.   right: 0;
  16. }

7. flex布局

  1. .parent{
  2.   height: 600px;
  3.   border: 3px solid red;
  5.   display: flex;
  6.   justify-content: center;
  7.   align-items: center;
  8. }
  9. .child{
  10.   border: 3px solid green;
  11.   width: 300px;
  12. }

8. flex布局+margin：auto

  1. .papa {
  2.   border: 1px solid black;
  3.   height: 200px;
  4.   width: 200px;
  6.   display: flex;
  7. }
  10. .child {
  11.   border: 1px solid red;
  12.   padding: 10px;
  14.   margin: auto;
  15. }