css常用水平对齐和垂直对齐方法

水平对齐

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div {
        margin: 1rem;
      }

      /* 文本居中 */
      .text-center {
        text-align: center;
        border: 1px solid green;
      }

      /* 图片居中 */
      img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100px;
      }

      /* 浮动居右 */
      .clearfix {
        position: relative;
        overflow: auto;
        clear: both;
        height: 100px;
      }
      .float-right {
        float: right;
        width: 40%;
        border: 1px solid green;
        padding: 10px;
      }

      /* 绝对定位居右 */
      .position-right {
        position: absolute;
        right: 0px;
        top: 2rem;
        width: 40%;
        border: 1px solid green;
        padding: 10px;
      }

      /* 使用margin属性居中 */
      .margin-center {
        margin: auto;
        width: 40%;
        border: 1px solid green;
        padding: 10px;
      }

      /* 使用margin属性居右 */
      .margin-right {
        margin-left: auto;
        width: 40%;
        border: 1px solid green;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="text-center">文本水平居中</div>

    <img src="../images/1.jpg" />

    <div class="clearfix">
      <div class="float-right">块元素浮动居右</div>
      <div class="position-right">块元素绝对定位居右</div>
    </div>

    <div class="margin-center">固定宽度块元素使用margin属性居中</div>

    <div class="margin-right">固定宽度块元素使用margin属性居右</div>
  </body>
</html>

垂直对齐

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      div {
        margin: 1rem;
      }

      /* 使用padding属性垂直居中对齐 */
      .padding-vcenter {
        padding: 30px 0;
        border: 1px solid green;
        text-align: center;
      }

      /* 使用line-height属性垂直居中对齐 */
      .lineheight-vcenter {
        height: 100px;
        line-height: 100px;
        border: 1px solid green;
        text-align: center;
      }

      /* 使用transform属性居中对齐 */
      .transform-center {
        height: 200px;
        position: relative;
        border: 1px solid green;
      }
      .transform-center p {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* 使用flex布局直居中对齐 */
      .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        border: 1px solid green;
      }
    </style>
  </head>
  <body>
    <div class="padding-vcenter">使用padding属性垂直居中对齐</div>

    <div class="lineheight-vcenter">使用line-height属性垂直居中对齐</div>

    <div class="transform-center">
      <p>使用transform属性居中对齐<br />使用transform属性居中对齐</p>
    </div>

    <div class="flex-center">使用flex布局直居中对齐</div>
  </body>
</html>

posted @ 2022-12-02 17:11  carol2014  阅读(252)  评论(0)    收藏  举报