如何讓元素水平垂直居中

Jason 發布于2019-08-29 12:31 / 2471人閱讀

摘要：我們經常遇到需要把中的內容進行水平和垂直居中多數是將圖片水平垂直居中，這里把我常用的一些方法總結一下，可能比較，煩請大家指正方法需要有兩個容器包住，上代碼頁面效果頁面效果代碼兼容容器中只有一個，沒有其他元素，可通過方

我們經常遇到需要把div中的內容進行水平和垂直居中（多數是將圖片水平垂直居中），這里把我常用的一些方法總結一下，可能比較low，煩請大家指正

table-cell方法
需要有兩個容器包住img，上代碼：

HTML

CSS

*{
    padding:0;
    margin:0;
}
.box{
    background-color:#eee;
    border:2px solid #000;
    width:500px;
    height:500px;
    margin:50px auto;
    display:table;
}
.wrapper{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

IE8/Firefox/Chrome/Safari/Opera頁面效果：

IE6/IE7頁面效果：

IE6/7代碼兼容：

容器中只有一個img，沒有其他元素，可通過vertical-align方法居中
當容器中只有一個img，并且img的狀態是行內元素時，可以通過設置行高為容器高度，設置img的vertical-align：middle居中，代碼：

div{
    height:300px;
    line-height:300px;
    text-align:center;
}
div > img{
    vertical-align:middle;
}

已知要居中元素的寬高，可以通過定位的方法來實現垂直水平居中
比如說要將div中的img居中，已知img高度規定為300*200，則代碼如下：

div{
    position:relative;
}
div > img{
    width:300px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-150px;
}

還有一種定位方法
html

css

.dad{
    position:relative;
}
.son{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;  //這是必須的
}

云服務器 GPU云服務器水平垂直居中 asp如何讓字體居中 html如何讓塊居中垂直居中

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111952.html

如何居中一個元素（終結版）

摘要：源代碼演示利用將要水平排列的塊狀元素設為，然后在父級元素上設置，達到與上面的行內元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內元素水平居...

Hydrogen 2019-08-29 16:56 評論0 收藏0
如何居中一個元素（終結版）

摘要：源代碼演示利用將要水平排列的塊狀元素設為，然后在父級元素上設置，達到與上面的行內元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內元素水平居...

hlcc 2019-08-02 11:43 評論0 收藏0
如何居中一個元素（終結版）

摘要：源代碼演示利用將要水平排列的塊狀元素設為，然后在父級元素上設置，達到與上面的行內元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖，請猛戳Github個人博客一、水平居中 1.行內元素水平居...

Meils 2019-08-23 12:20 評論0 收藏0
css 元素居中

摘要：一水平居中行內元素水平居中在父元素上設置使文字圖片水平居中。結果如圖塊級元素的寬高不固定，就不能用負了使用百分比是相對于父元素的寬度。代碼結果實現代碼設置寬高以顯示居中效果彈性布局垂直居中水平居中一：水平居中 1、行內元素水平居中在父元素上設置 text-align: center 使文字/圖片水平居中。 .container { text-align: center; } 2...

AZmake 2019-08-29 17:16 評論0 收藏0
CSS居中

摘要：備份及更新說明表示要被居中的元素，表示要居中的元素的父元素包含元素的元素。左右居中要居中的塊級元素元素設置。網格布局居中根據需要布局網格，將要居中的元素擺放在網格中間即可。 [TOC]備份及更新說明 .center表示要被居中的元素，.wrap 表示要居中的元素的父元素（包含.center元素的元素）。為了便于理解和敘述同一：對于文本內容居中的情況，.wrap就是指包含文...

劉永祥 2019-08-29 14:04 評論0 收藏0