用 CSS 和 JS 實現元素的水平垂直居中

阿新 • • 發佈：2019-01-05

一、CSS 實現（2種方法）

方法1：已知要居中元素的寬高

   .d1{
        width:200px;
        height:200px;
        background-color:red;
        position:absolute;
        top:50%;
        left:50%;
        margin-top: -100px;
        margin-left: -100px;
    }

方法2：未知要居中元素的寬高（移動端建議這麼做）

      .d1{
            width:200px;
            height:200px;
            background-color:red;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            -ms-transform:translate(-50%,-50%);
            -moz-transform:translate(-50%,-50%);
            -o-transform:translate(-50%,-50%);
        }

二、JS 實現

    function middle(){
        //獲取螢幕的高度
        var heightBig=window.innerHeight;
        //獲取元素的高度
        var d1=document.querySelector(".d1");
        var heightSmall=parseFloat(window.getComputedStyle(d1).height);
        d1.style.margin=(heightBig-heightSmall)/2+"px auto";
    }
    middle();
    window.onresize=middle;

用 CSS 和 JS 實現元素的水平垂直居中

一、CSS 實現（2種方法）方法1：已知要居中元素的寬高 .d1{ width:200px; height:200px; background-

css 實現元素水平垂直居中的幾種方法

在做網頁的時候經常會需要讓某一個元素水平垂直居中，而要實現水平垂直居中有很多種方法，不知道你們有沒遇到這種情況：方法倒是知道，甚至還知道許多種，可一到真正用到的時候，卻突然在努力地回想，這或許就是人們經常說的「腦子短路」，所以，這篇文章和大家一起來溫故而知新，梳

CSS未知寬高元素水平垂直居中

use ali lan 並且 css3 優點 left 顯示設置 spl 思路：顯示設置父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中優點：父元素（parent）可以動態的改變高度（table元

css不定高使元素水平垂直居中

父元素高度不定，子元素水平垂直居中 html <div class="parent"> <div class="child">123456</div> <

css偽元素實現圖片水平垂直居中

通常，我們在開發頁面的時候，遇到固定圖片大小的情況較為常見，但是，也有某種特殊情況，那就是在固定大小的父元素中，顯示大小不固定且寬高都不會超過父元素大小的圖片，下面我們直接看程式碼。 <!DOCTYPE html> <html lang="en"> <h

純CSS實現圖片水平垂直居中於DIV（圖片未知寬高）

分享分享圖片 gin pos pic ble 居中實現圖 class .demo{border:1px #ddd solid;width:267px;height:267px;overflow:hidden;text-align:center;display:tabl

CSS元素水平垂直居中的方法

垂直 .com put ron spa blank span osi 絕對定位 1. 元素水平居中 1.1 設置父元素的屬性 text-align: center; 說明：此屬性只針對父元素的子元素為內聯元素時有效，比如：img，input，select，but

html css實現文字水平垂直居中顯示

這幾天在工作中遇到了一個小問題：文字內容怎麼能在div裡水平垂直居中顯示呢？同時群裡的小夥伴恰巧也有提問這個問題的，所以我就總結了一下我知道的方法。一、利用行高(line-height)和vertical-align配合實現具體做法如下： html: <div clas

簡單總結position定位和元素水平垂直居中

position position的屬性值共有四個常用的：relative、absolute、fixed、static。首先普及一下文件流的知識：顯示元素物件在視窗排列時所佔用的位置，自上而下，從左到右。脫離文件流會影響其他元素的位置。 relative：相對定位，不脫離文件流，在文件

用css、js實現字幕橫向滾動

最近，在寫電子房價牌頁面時，關於電子房價的提示，需要用到橫向滾動字幕的效果，本文用的是jquery.js的方法來實現的。在網上查閱資料的時候，發現以前會使用<marque>的html標籤來處理，但是，最新的MDN已將該標籤廢棄。一、例項相關情況介紹

css設定元素水平垂直居中的方法

看到標題，相信大家並不陌生。這個問題，經常會出現在面試題中。通常會要求面試者寫出幾種方法。那麼，究竟有幾種方法，每種方法的相容情況如何，相信大家很少研究過。今天，我們就一起來看看。通常分為2種情況，已知元素的寬度或未知。我們先說說在已知的情況下，要如何設定。舉例說明：

css中已知寬高的子元素水平垂直居中的三種方法

元素水平垂直居中三種的方法設定兩個盒子，關係是父與子： <body> <div id="wrap"> <div id="inner">

css實現div水平垂直居中

　　中秋快到了，祝大家中秋快樂。　　平時大家寫bug過程中肯定會遇到讓div框水平或者垂直居中，然而有時候能居中，有時候不能居中。我把平時遇到的一些方法寫出來，如果對你有用，那便是晴天。　　1、text-align: center; text-align: center; 　　這個是最簡單的了，實現文