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

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

元素已知宽度

绝对定位 + 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实现垂直水平居中的总结，如有异议欢迎评论留言。

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

元素已知宽度

元素未知宽度

相关推荐