盒子/图片/内容垂直、水平居中方法总结

ICE努力学前端

于 2022-07-11 23:06:12 发布

阅读量3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： css css3 html

本文链接：https://blog.csdn.net/zhaohb2016/article/details/125732633

本文总结了CSS实现盒子、文本和图片的垂直、水平居中对齐的各种方法，包括定位技巧如子绝父相、margin、flex、table-cell和inline-block，以及文本的text-align和line-height对齐，图片的flex和绝对定位策略。详细讲解了每种方法的适用场景和实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先画两个盒子

  <style>
    .parent {
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
    .child {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class='parent'>
    <div class='child'></div>
  </div>
</body>

盒子居中对齐

1、定位：子绝父相+position+transform

<style>
    .parent {
    position:relative;
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
    .child {
    	 
      width: 200px;
      height: 200px;
      background-color: pink;
      //子绝父相+position+transform
      position:absolute
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
  </style>

2、定位：margin

<style>
    .parent {
    position:relative;
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
    .child {
    	 
      width: 200px;
      height: 200px;
      background-color: pink;
      //margin
      top:0;
      left:0;
      bottom:0;
      right:0;
      margin:auto;
    }
  </style>

3、定位：flex

将父盒子设置成弹性盒容器
让子元素水平居中，垂直居中

<style>
    .parent {
      width: 500px;
      height: 500px;
      background-color: skyblue;
      //flex
      display:flex;
      justify-content:center;//垂直
      align-items:center;//水平
    }
    .child {
    	 
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>

4、定位：table-cell

<style>
.parent {
    display: table-cell;
    vertical-align: middle;//定义行内元素相对于所在行的基线的垂直对齐。
}
.child {
  margin: 0 auto;
}

</style>

5、定位：inline-block

<style>
    .parent {
      width: 500px;
      height: 500px;
      line-height:500px;//行内块可以居中对齐
      text-align:center;
      background-color: skyblue;
    }
    .child {
      width: 200px;
      height: 200px;
      background-color: pink;
      display:inline-block;
      vertical-align:middle;
    }
  </style>
</head>

<body>
  <div class='parent'>
    <div class='child'></div>
  </div>
</body>

文本居中对齐

1、text-align:center水平对齐

当中心元素是inline-类型的元素，包括inline、inline-block、inline-flex、inline-table;
在父级元素上使用text-align:center;

.parent {
   text-align: center;
}

2、使用边距margin

当中心元素是block块元素时

.center {
    margin: 0 auto;
}

元素设置margin:auto后，元素通过指定宽度，并将两边的空外边距平均分配;

如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

3、lineheight与height 垂直居中

文本垂直居中将line-height设为和height相同的高度(仅单行可用)
//在父级元素上;

{ 
  height:30px;
  line-height:30px;
}

图片垂直居中

利用 display: flex;align-items: center 实现垂直居中。flex可能不是实现垂直居中最好的选择，因为IE8,9并不支持它。

1、flex

<div class="flexbox">
    <img src="1.jpg" alt=""></div>

body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}

2、用绝对定位实现垂直居中（推荐-兼容性好）

body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}