CSS实现垂直水平居中

最新推荐文章于 2024-12-03 18:59:15 发布

转载最新推荐文章于 2024-12-03 18:59:15 发布 · 271 阅读

文章标签：

#垂直水平居中

html 同时被 2 个专栏收录

22 篇文章

订阅专栏

css

16 篇文章

订阅专栏

博客介绍了元素垂直水平居中的实现方法，分元素已知宽度和未知宽度两种情况，均可用绝对定位 + margin auto + 流体特性实现。此外，还提到了绝对定位 + transform反向偏移、flex布局、table - cell布局等方法。

元素已知宽度

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

   <!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>

元素未知宽度

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

   <!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, 则平分剩余空间；

绝对定位 + transform反向偏移

   <!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>

flex布局

   <!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 设置垂直方向的元素位置

table-cell布局

   <!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 设置元素中的文本的水平对齐方式