关于前端:元素水平垂直居中方法汇总

37次阅读

共计 1434 个字符，预计需要花费 4 分钟才能阅读完成。

程度居中

内联元素

text-align:center

块级元素程度居中

定宽状况下：
1、利用 margin

margin-left:auto;
margin-right:auto;

2、margin 负值 + 相对定位

<!DOCTYPE html>
<html>
   <head>
       <style>
          .parent{
              position: relative;
              width: 100%;
          }
          .child{
              width: 200px;
              height: 200px;
              position: absolute;
              left: 50%;
              margin-left: -100px;
              background-color: cyan;
          }
       </style>
   </head>
   <body>
       <div class="parenet">
           <p class="child">margin 负值 + 相对定位设置程度居中 </p>
       </div> 
   </body>
</html>

3、相对定位 +margin auto

<!DOCTYPE html>
<html>
   <head>
       <style>
          .parent{
              position: relative;
              width: 100%;
          }
          .child{
              width: 200px;
              height: 200px;
              position: absolute;
              left: 0;
              right: 0;
              margin: auto;
              background-color: cyan;
          }
       </style>
   </head>
   <body>
       <div class="parenet">
           <p class="child"> 相对定位 +margin auto 设置程度居中 </p>
       </div> 
   </body>
</html>

4、flex 布局

<!DOCTYPE html>
<html>
   <head>
       <style>
          .parent{
              display: flex;
              justify-content: center;
              width: 100%;
          }
          .child{
              width: 200px;
              background-color: cyan;
          }
       </style>
   </head>
   <body>
       <div class="parent">
           <p class="child">flex 程度居中 </p>
       </div> 
   </body>
</html>

宽度未知状况下：
1、相对定位, 左右间隔设置雷同

<!DOCTYPE html>
<html>
   <head>
       <style>
          .parent{position: relative;}
          .child{
              position: absolute;
              left:25%;
              right: 25%;
              background-color: cyan;
          }
       </style>
   </head>
   <body>
       <div class="parenet">
           <p class="child"> 相对定位设置程度居中，宽度未知 </p>
       </div> 
   </body>
</html>

2、相对布局 +translate

<!DOCTYPE html>
<html>
   <head>
       <style>
          .parent{position: relative;}
          .child{
              position: absolute;
              left: 50%;
              transform: translate(-50%);
              background-color: cyan;
          }
       </style>
   </head>
   <body>
       <div class="parenet">
           <p class="child"> 相对定位设置程度居中，宽度未知 </p>
       </div> 
   </body>
</html>