html页面元素的水平垂直居中

最新推荐文章于 2021-08-16 18:24:10 发布

十七_web

最新推荐文章于 2021-08-16 18:24:10 发布

阅读量418

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端面试 web工具文章标签： html css

本文链接：https://blog.youkuaiyun.com/liuzhiqianduan/article/details/109298583

前端面试同时被 2 个专栏收录

2 篇文章

订阅专栏

web工具

2 篇文章

订阅专栏

本文介绍了多种网页元素在不同情况下的水平垂直居中方法，包括固定尺寸和未知尺寸的元素在屏幕或父容器中的居中显示。覆盖了传统CSS定位、CSS3变形及Flex布局等多种实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html页面元素的水平垂直居中

水平垂直居中

1、已知大小的元素在屏幕窗口水平垂直都居中

 元素{  width:value;
            height:value;
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-width/2+"px" ;
            margin-top:-height/2+"px” ;}

2、未知大小的元素在屏幕窗口水平垂直都居中

    元素{  position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            margin:auto;}

3、已知大小的子元素在父元素中水平垂直都居中

    父元素{  position:relative;  }
    子元素{  width:value;
                height:value;
                position:absolute;
                left:50%;
                top:50%;
                margin-left:-width/2+"px" ;
                margin-top:-height/2+"px" ; }

4、未知大小的子元素在父元素中水平垂直都居中

    父元素{ position:relative; }
    子元素{ position:absolute;
                left:0;
                top:0;            
                right:0;
                bottom:0;
                margin:auto;}

扩展方案1、在父元素中添加一个span，并设置如下样式：

父元素{  text-aling:center; }
span{  display:inline-block;
	   width:0;
       height:100%;
       vartical-align:middle; }
子元素{ vartical-align:middle; }

扩展方案2、

 父元素{ display:table-cell;
        text-align:center;
        vertical-align:middle; }

2、使用css3变形的方式

使用css3变形的方式实现已知或未知大小的元素在屏幕窗口水平垂直都居中

元素{
        position:fixed;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
    }

使用css3变形的方式实现已知或未知大小的子元素在父元素中水平垂直都居中

父元素{
        position:relative;
    }
子元素{
        position:absolute;
        left:50%;
        top50%;
        transform:translate(-50%,-50%);
    }

3、使用flex布局的方式

使用flex布局的方式实现已知或未知大小的元素在屏幕窗口水平垂直都居中

html，body{ height:100%;}
body{ display:flex; justify-content:center; align-items:center; }

使用flex布局的方式实现已知或未知大小的子元素在父元素中水平垂直都居中

父元素{ display:flex; justify-content:center; align-items:center; }