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

最新推荐文章于 2024-11-23 10:08:40 发布

ICE努力学前端

最新推荐文章于 2024-11-23 10:08:40 发布

阅读量2.9k

点赞数 2

文章标签： css css3 html

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

版权

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

摘要由CSDN通过智能技术生成

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

盒子居中对齐
文本居中对齐
图片垂直居中
- - 1、flex
  - 2、用绝对定位实现垂直居中（推荐-兼容性好）

先画两个盒子

  <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