【前端芝士樹】如何對元素塊實現居中（垂直和水平方向都居中）？

baoxl 發布于2019-08-23 11:48 / 2793人閱讀

摘要：前端芝士樹如何對元素塊實現垂直居中水平居中和垂直居中是前端開發過程中肯定會遇到的問題，下面我講解幾種常見的方式。

【前端芝士樹】如何對元素塊實現垂直居中？

水平居中和垂直居中是前端開發過程中肯定會遇到的問題，下面我講解幾種常見的方式。

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如何讓塊居中垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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