css实现水平垂直居中的方法

最新推荐文章于 2024-09-02 03:44:41 发布

今天你四百冷了吗

最新推荐文章于 2024-09-02 03:44:41 发布

阅读量244

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_48931100/article/details/126281572

版权

本文介绍了七种使用CSS实现元素水平垂直居中的方法，包括margin、定位、伸缩盒/网格布局以及针对行内元素的text-align和line-height的使用。

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

方法不唯一，此处只列出七种方式

文章目录

第一种方法：利用margin
第二种方法：利用定位：子绝父相
第三种方法：利用定位：子绝父相
第四种方法：利用伸缩盒/网格布局
第五种方法：利用伸缩盒/网格布局
第六种方法：利用定位以及平移：子绝父相
第七种方法：利用margin和平移
当子元素是行内元素时
- 利用text-align以及line-height

第一种方法：利用margin

前提：父元素和子元素都设置了宽高

 给父元素设置border避免外边距合并问题;
margin-top/margin-bottom = (父height-子height)/2;
 margin-left/margin-right = (父width-子width)/2或者为auto；

<div class="outer">
    <div class="inner">aaa</div>
</div>

 	.outer {
   
      width: 500px;
      height: 500px;
      background-color: pink;
      border: 1px solid red;
    }

    .inner {
   
      width: 100px;
      height: 200px;
      background-color: skyblue;
      margin: 150px 200px;
    }

第二种方法：利用定位：子绝父相

前提：父元素和子元素都设置了宽高

给父元素设置position:relative;
子元素设置position：absolute
子元素设置偏移量：top、bottom、left、right都为0
子元素设置margin:auto

<div class="outer">
    <div class="inner">aaa</div>
</div>

.outer {
   
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
    }

    .inner {
   
      width: 100px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }</