元素水平垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布

爱笑萌娃

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量137

点赞数

分类专栏： html 文章标签： html元素水平垂直居中 4种方式

本文链接：https://blog.csdn.net/qq_43101321/article/details/82716848

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

元素水平垂直居中的四种方式

1）  定位方式
position:absolute;
top:50%;
left:50%;
margin-left:(自身宽度的一半);margin-top:-50%value（自身高度的一半）
2）   定位
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
3）  flex的方式
给 容 器 加 ：
 display:flex ; 
 justify-content:center ;
align-items:center ;
4）  位移的方式
position:absolute ;
top:50% ;
left:50% ;
transform:translate(-width/2,-height/2) ;