【HTML/CSS】CSS实现垂直水平居中

王景迁 2019-07-01

相信在工作中经常会遇到需要某某元素垂直水平居中的需求,下面总结一下实现方法

元素已知宽度

绝对定位 + margin反向偏移
  • html

    <!DOCTYPE html>
       <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Sumon Test</title>
         <div style="background-color: yellow;
                 width: 300px;
               height: 300px;
               position: relative;
               ">
           <div style="background-color: #F00;
               width: 100px;
               height: 100px;
               position: absolute;
               left: 50%;
               top: 50%;
               margin: -50px 0 0 -50px;
               ">
           </div>
         </div>
       </head>
       <body>
       
       </body>
       </html>

    【HTML/CSS】CSS实现垂直水平居中

元素未知宽度

绝对定位 + margin auto + 流体特性
  • html

    <!DOCTYPE html>
       <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Sumon Test</title>
         <div style="background-color: yellow;
                 width: 300px;
               height: 300px;
               position: relative;
               ">
           <div style="background-color: #F00;
               width: 100px;
               height: 100px;
               position: absolute;
               left: 0;
               top: 0;
               bottom: 0;
               right: 0;
               margin: auto;
               ">
           </div>
         </div>
       </head>
       <body>
       
       </body>
       </html>
  • Tips

    当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性就发生了。
       具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样:
       1.如果一侧定值,一侧auto,auto为剩余空间大小;
       2.如果两侧均是auto, 则平分剩余空间;

    【HTML/CSS】CSS实现垂直水平居中

绝对定位 + transform反向偏移
  • html

    <!DOCTYPE html>
       <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Sumon Test</title>
         <div style="background-color: yellow;
                 width: 300px;
               height: 300px;
               position: relative;
               ">
           <div style="background-color: #F00;
               width: 100px;
               height: 100px;
               position: absolute;
               left: 50%;
               top: 50%;
               transform: translate(-50%, -50%);
               ">
           </div>
         </div>
       </head>
       <body>
       
       </body>
       </html>

    【HTML/CSS】CSS实现垂直水平居中

flex布局
  • html

    <!DOCTYPE html>
       <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Sumon Test</title>
         <div style="background-color: yellow;
                 width: 300px;
               height: 300px;
               display: flex;
               justify-content: center;
               align-items: center;
               ">
           <div style="background-color: #F00;
               width: 100px;
               height: 100px;
               ">
           </div>
         </div>
       </head>
       <body>
       
       </body>
       </html>
  • Tips

    1.justify-content 设置水平方向的元素位置
       2.align-items 设置垂直方向的元素位置

    【HTML/CSS】CSS实现垂直水平居中

table-cell布局
  • html

    <!DOCTYPE html>
       <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Sumon Test</title>
         <div style="background-color: yellow;
                 width: 300px;
               height: 300px;
               display: table-cell;
               vertical-align: middle;
               text-align: center;
               ">
           <div style="background-color: #F00;
               width: 100px;
               height: 100px;
               display: inline-block;
               ">
           </div>
         </div>
       </head>
       <body>
       
       </body>
       </html>
  • Tips

    1.vertical-align 设置元素的垂直对齐方式
      2.text-align 设置元素中的文本的水平对齐方式

    【HTML/CSS】CSS实现垂直水平居中

以上就是我对CSS实现垂直水平居中的总结,如有异议欢迎评论留言。

相关推荐

覆雪蓝枫 / 0评论 2019-06-27