css：元素居中整理水平居中、垂直居中、水平垂直居中

news2024/11/25 18:46:27

1、水平居中

1.1、行内元素

行内元素（比如文字，span，图片等）的水平居中，其父元素中设置

text-align: center;

示例

<style>
   body {
     background-color: #eeeeee;
   }
  
  .box {
    background-color: green;
    color: #fff;
    margin-top: 20px;
  }

  .box--center {
    text-align: center;
  }
</style>

<div class="box">两个黄鹂鸣翠柳，一行白鹭上青天</div>

<div class="box box--center">两个黄鹂鸣翠柳，一行白鹭上青天</div>

效果
在这里插入图片描述

1.2、块级元素

块级元素，比如 div，其默认宽度是100%。给定一个宽度的时候，可以居中对齐

width: 50%;
margin: 0 auto;

示例

<style>
    body {
    background-color: #eeeeee;
    }

    .box {
    background-color: green;
    height: 50px;
    }

    .box--center {
    width: 50%;
    margin: 0 auto;
    margin-top: 20px;
    }
    
</style>

<div class="box"></div>

<div class="box box--center"></div>

实现效果
在这里插入图片描述

2、垂直居中

2.1、单行文字

对于单行文字居中，可以设置父元素的行高来实现，将其行高与元素高度设置为相同的值即可：

height: 50px;
line-height: 50px;

示例

<style>
    body {
        background-color: #eeeeee;
    }

    .box {
        background-color: green;
        color: #fff;
        margin-top: 20px;
        height: 50px;
    }

    .box--center {
        line-height: 50px;
    }
</style>

<div class="box">两个黄鹂鸣翠柳，一行白鹭上青天</div>

<div class="box box--center">两个黄鹂鸣翠柳，一行白鹭上青天</div>

在这里插入图片描述

2.2、多行文字

也适用于单行文字、行内元素

height: 200px;
display:table-cell;
vertical-align:middle;

示例

<style>
 body {
    background-color: #eeeeee;
    display: flex;
  }

  .box {
    background-color: green;
    color: #fff;
    height: 200px;
    width: 130px;
  }

  .box--center {
    display: table-cell;
    vertical-align: middle;
  }

  .box-wrap {
    margin-left: 20px;
  }
</style>

<div class="box">两个黄鹂鸣翠柳，一行白鹭上青天。</div>

<div class="box-wrap">
  <div class="box box--center">两个黄鹂鸣翠柳，一行白鹭上青天。</div>
</div>

在这里插入图片描述

2.3、图片垂直居中

上面的方法也可以让图片垂直居中

display: table-cell;
vertical-align: middle;

示例

<style>
  body {
    background-color: #eeeeee;
    display: flex;
  }

  .box {
    background-color: green;
    color: #fff;
    height: 200px;
    width: 200px;
  }

  .box--center {
    display: table-cell;
    vertical-align: middle;
  }

  .box-wrap {
    margin-left: 20px;
    color: #fff;
    position: relative;
  }

  .image {
    width: 192px;
    height: 108px;
    vertical-align: middle;
  }

  .label {
    position: absolute;
    right: 0;
    top: 0;
    background-color: pink;
    padding: 0 4px;
  }
</style>

<div class="box-wrap">
  <div class="box">
    <img
      class="image"
      src="https://cn.bing.com/th?id=OHR.ViennaAutumn_ZH-CN7011999199_1920x1080.webp"
      alt=""
    />
  </div>
  <div class="label">box</div>
</div>

<div class="box-wrap">
  <div class="box box--center">
    <img
      class="image"
      src="https://cn.bing.com/th?id=OHR.ViennaAutumn_ZH-CN7011999199_1920x1080.webp"
      alt=""
    />
    <div class="label">box--center</div>
  </div>
</div>

在这里插入图片描述

3、水平垂直居中

使用绝对定位实现：子绝父相（子元素绝对定位，父元素相对定位）

  .box-wrap--center {
    position: relative;
  }

  .box-wrap--center .box {
    position: absolute;
    left: 50%; /* x轴方向相对父元素的宽移动 50% */
    top: 50%; /* y轴方向相对父元素的高移动 50% */
    transform: translate(-50%, -50%); /* x轴、y轴方向相对自身元素的宽、高移动 -50% */
  }

示例

<style>
  body {
    background-color: #eeeeee;
    display: flex;
  }

  .box-wrap {
    height: 300px;
    width: 300px;
    background-color: green;

    margin-right: 20px;
  }

  .box {
    background-color: pink;
    height: 100px;
    width: 100px;
  }

  .box-wrap--center {
    position: relative;
  }

  .box-wrap--center .box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="box-wrap">
  <div class="box"></div>
</div>

<div class="box-wrap box-wrap--center">
  <div class="box "></div>
</div>