【前端芝士树】如何对元素块实现居中（垂直和水平方向都居中）？

baoxl 发布于2019-08-23 11:48 / 2792人阅读

摘要：前端芝士树如何对元素块实现垂直居中水平居中和垂直居中是前端开发过程中肯定会遇到的问题，下面我讲解几种常见的方式。

【前端芝士树】如何对元素块实现垂直居中？

水平居中和垂直居中是前端开发过程中肯定会遇到的问题，下面我讲解几种常见的方式。

1/ 利用Flex布局来实现极速居中

The HTML

The CSS

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

2/ 绝对定位下，已知目标元素宽高，利用CSS或者JS实现固定长宽容器的居中

The HTML

.item{
    margin:0 auto;
    width:200px;
    height:200px;
}

2.1 margin 设为宽度的一半或者auto

.item{
    width:300px;
    height:200px;
    
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
    //或者 margin: auto;
}

2.2 使用jquery计算 left 和 top 的值

$(window).resize(function(){

    $(".item").css({
        position:"absolute",
        left: ($(window).width() - $(".item").outerWidth())/2,
        top: ($(window).height() - $(".item").outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

3/ Fixed定位下，利用margin:auto实现fixed元素的居中

The CSS

.item{
   position: fixed;
   margin: auto;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;

   width: 200px;
   height: 100px;
}

4/ 利用display: table-cell来实现居中

注意，父元素的宽度需要被定义，同时父元素的vertical-align以及item的margin: auto都是缺一不可的
The CSS

 .container {
    width: 400px;
    display: table-cell;
    vertical-align: middle;
}

.item {
    margin: 0 auto;
}

GPU云服务器云服务器水平垂直居中实现垂直居中 html如何让块居中垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97489.html

【前端芝士树】如何对元素块实现居中（垂直和水平方向都居中）？

摘要：前端芝士树如何对元素块实现垂直居中水平居中和垂直居中是前端开发过程中肯定会遇到的问题，下面我讲解几种常见的方式。【前端芝士树】如何对元素块实现垂直居中？ showImg(https://segmentfault.com/img/bVbisNT?w=430&h=183); 水平居中和垂直居中是前端开发过程中肯定会遇到的问题，下面我讲解几种常见的方式。 1/ 利用Flex布局来实现极速居...

_Dreams 2019-08-29 16:39 评论0 收藏0
【芝士整理】CSS经典布局

摘要：水平居中行内元素定宽块元素常规流中浮动块元素负边距绝对定位元素负边距居中绝对居中不定宽块元素完整垂直居中单行和一致定高块元素负边距居中绝对居中不定高块元素完整水平垂直居中行内元素水平居中行内元素 text-align .parent { text-align: center; } 定宽块元素常规流中 margin: 0 auto; .child { width: ...

chavesgu 2019-08-30 15:54 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0