css多种方法实现水平垂直居中

最新推荐文章于 2024-06-07 19:31:00 发布

土豆片片

最新推荐文章于 2024-06-07 19:31:00 发布

阅读量540

点赞数 6

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/baidu_33164415/article/details/137376685

版权

前端专栏收录该内容

136 篇文章 0 订阅

订阅专栏

前提

图片大小为：399*367，没有凑成整数-_-
html代码：

<div>
        
</div>

一、脱离文档流且父元素已知宽高

1、margin:auto法

div {
    width: 600px;
    height: 500px;
    position: relative;
    border: 1px solid #465468;
}

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

父元素的宽和高应>=图片的宽和高，且position: relative不能少，图片设置绝对定位、上下左右值均为0 ，margin: auto必不可少，效果如下图：

margin:auto法居中效果图

浏览器中图片的盒子模型：

margin:auto法图片盒子模型

上下左右的位置均为0，margin确实auto。

2、负margin法

上述例子中其他均不变，img的样式改为：

 img {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -183.5px;            /*height的一半*/
      margin-left: -199.5px;            /*width的一半*/
 }

仍然是绝对定位，但top和left的值均为50%，margin-top的值为图片height（此处没有padding）的一半，margin-left的值为图片width的一半。
显示效果依然是居中，不贴图了，浏览器中图片的盒子模型：

负margin法图片盒子模型

注意：position上下左右的值均不一样，但是用left的值加上margin-left的负值的结果是多少呢？250-199.5=50.5，和right的结果值一样，正好水平居中。top和bottom的关系同理。

3、变形

div样式依然不变，img样式变为：

img {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);//浏览器厂商前缀必不可少
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

是不是和第二种方法很像？只不过把margin-left和margin-top换成了translate。往左移动自身宽度的50%，往上移动自身高度的50%，其实原理和负margin 法类似。
显示效果和前面一样，img盒模型如下：

变形盒模型

二、不脱离文档流，父元素已知宽高

1、webkit-box法

弹性框模型,真正意义上的流体布局(但是已过时，最好用flex),此法至少需要知道高度，宽度不知道的时候会以body的宽度为宽度，只需设置div的样式，img不需要设置。

 div {
   border: 1px solid #465468;
   width: 500px;
   height: 400px;
   display: -webkit-box;//将此元素及其直系子代加入弹性框模型中
   -webkit-box-pack: center;//设置沿 box-orient 轴的父元素中子元素的排列方式。
   -webkit-box-align: center;//设置框的子代在框中的排列方式,如果方向是水平的，该属性就会决定垂直排列
}

效果和第一张图一样，img盒模型只有content一个值：

webkit-box img盒模型

四、不脱离文档流，父元素宽高已知未知均可

1、table-cell法

div {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
     border: 1px solid #465468;
}
img {
     vertical-align: middle;
}

div的宽高就是img的宽高。**table-cell的作用：指定对象作为表格单元格，类似html标签，也就是说它可以使对象具有表格单元格的属性。**img 的 vertical-align: middle必不可少。如果去掉的话，图片会上移一点，文字的行高会变。居中显示效果图如下：

table-cell 布局

盒子模型和webkit-box法的盒模型一样，只有一个content值，此处图省略~

2、flex布局

最时髦方法，但还存在浏览器的支持问题：

 div {
     display: flex;
     justify-content: center;//控制水平方向的居中
     align-items: center;//控制垂直方向的居中
     border: 1px solid #465468;
 }

只需给父级元素设定flex属性值即可，内部img或者文字不需要设置其他属性，显示效果如下：

flex布局

没有设置宽度的话自动以body宽度为宽度,图片的高度为高度，盒模型同table-cell的盒模型。

3、inline-block法

inline-block+after

div {
     text-align: center;
     overflow: auto;
     font-size:0;
 }
div:after,
img {
     display: inline-block;
     vertical-align: middle;
 }
div:after {
     content: '';
     height: 100%;
}
img {
     max-width: 99%; 
}

首先设置img垂直居中；然后，给伪类设置display: inline-block，这样伪类的高度就比较准确了，而不是一开始默认计算的值（div有高度的话和div一样，没有的话为0），再设置vertical-align: middle，让伪类的内容也垂直居中，欧了。