我把一个子元素在父元素中水平垂直居中的实现方式分为三类，第一类是宽度已知，第二类是宽度未知，第三类是图片水平垂直居中。

第一类宽度已知

第一种方式：采用绝对定位

原理

元素开启绝对定位后，水平方向和垂直方向分别要满足下列等式

水平方向：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块内容区的宽度
垂直方向：top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块内容区的高度
如果上述等式不成立，则发生过度约束
以水平方向为例（假设不指定padding和border，即使指定也对布局没有影响）
当发生过渡约束时，如果这9个属性的值当中没有auto，则会自动调整right的值，以使等式成立。如果有auto，则自动调整值为auto的属性以使等式成立。
可以设置为auto的值有 left right width 和 margin
由于前提条件是宽度已知，所以只能是left，right以及margin可以是auto。所以将left,right的值都设置为0，margin设置为auto，则9个值当中能调整的只有margin，使等式成立。
水平方向和垂直方向的原理一样

代码

<!--HTML代码-->
<div class="outer"><div class="box1"> </div>
</div>

/*CSS代码*/
.outer{position:relative;width:500px;height:500px;background-color:blue;
}
.box1{position:absolute;width:100px;height:100px;top:0;right:0;bottom:0;left:0;margin:auto;
}

第二种方式：将父元素设置为一个单元格

原理

水平方向上还是通过margin设置。垂直方向上通过display将父元素设置为table-cell，即表格的单元格。然后用vertical-align:middle;，使子元素垂直居中

代码

<!--html代码-->
<divclass="box1"><divclass="box2"></div>
</div>

/*CSS代码*/
.box1{width: 500px;height:500px;background-color: blueviolet;display: table-cell;vertical-align: middle;}
.box2{width:100px;height:100px;background-color: aquamarine;margin:0 auto;}

第三种方式：flex布局

原理

利用flex布局，设置justify-content:center，让元素在主轴方向上居中排列
设置align-items:center，让元素在辅轴上居中对齐

代码

<!--HTML文件-->
<div class="outer"><div class="box1"></div>
</div>

/*CSS文件*/
.outer{width:800px;height:800px;background-color:yellow;display:flex;justify-content:center;align-items:center;
}
.box1{width:200px;height:200px;background-color:green;
}

第二类：宽度未知

第四种方式：利用平移实现垂直居中效果

原理

对于宽高未知的元素，我们将他绝对定位，将其偏移量设置为left:50%,top:50%，此时元素在包含块中心的偏右下方。然后再通过平移将其向上和向左移动自身一半的大小

代码

<!-- HTML代码 -->
<div class="box1">1222345</div>

/*CSS代码*/
.box1{position：absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);
}

第三类：图片水平垂直居中

第五种方式

原理

通过给伪元素:after设置高度，撑起父元素，然后让图片垂直居中，再用text-align让图片水平居中

代码

<!--HTML代码-->
<body><img src="../img/bg.jpg" alt="">
</body>

/*CSS代码*/
html,body{height:100%;}body{/*使图片水平居中*/text-align: center;}body::after{content:"";/*让伪元素撑起高度*/height:100%;display:inline-block;vertical-align: middle;}img{/*使图片垂直居中*/vertical-align: middle;}

CSS | 水平垂直居中都有哪几种方式相关推荐

css水平垂直居中(不定高)的三种方法
<style>.parent{ height:200px;width:200px;border:1px solid #000;}.son{width:100px;background: r ...
css水平垂直居中四种常用方式
css水平垂直居中第一种:flex布局水平垂直居中思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
css 水平垂直居中实现方式
css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中行内元素html结构 <div ...
css水平垂直居中对齐方式
css水平垂直居中总共有四种方法 ① 使用绝对定位注意:使用绝对定位居中需要固定宽高 position:absolute; top:0; left:0; bottom:0; right:0; wid ...

CSS | 水平垂直居中都有哪几种方式

第一类宽度已知

第一种方式：采用绝对定位

原理

代码

第二种方式：将父元素设置为一个单元格

原理

代码

第三种方式：flex布局

原理

代码

第二类：宽度未知

第四种方式：利用平移实现垂直居中效果

原理

代码

第三类：图片水平垂直居中

第五种方式

原理

代码

CSS | 水平垂直居中都有哪几种方式相关推荐

最新文章

热门文章

CSS | 水平垂直居中都有哪几种方式

第一类 宽度已知

第一种方式：采用绝对定位

原理

代码

第二种方式：将父元素设置为一个单元格

原理

代码

第三种方式：flex布局

原理

代码

第二类：宽度未知

第四种方式：利用平移实现垂直居中效果

原理

代码

第三类：图片水平垂直居中

第五种方式

原理

代码

CSS | 水平垂直居中都有哪几种方式相关推荐

最新文章

热门文章

第一类宽度已知