您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

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

时间:05-22来源:作者:点击数:

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>
在这里插入图片描述
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门