CSS/html各種div 等元素居中的幾種方法

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

元素居中這個樣式真是有相當多的頁面都在使用，在這裡，跟大家分享幾種好用的居中方法

1、控制margin - - - - - -margin:0 auto;
#d1{
width:500px;
height:300px;
margin:0 auto;
}

!注意，這個要求居中元素必須是塊級元素，且必須設定寬，否則無效；

2、利用text-align - - - - - -text-align: center; （推薦）

#d2{
    text-align: center;
    }

#d2>div{
        display: inline-block;
        width:300px;
        height:100px;
        background: #aff;
    }

!注意，這個設定是要居中的元素為行內塊元素，只需要加一個父元素並給其設定文字居中即可，這個相對萬能一些，而且沒有相容性問題，個人也最喜歡用這個；

3、CSS3 過渡屬性 transform - - - - - -transform: translate(-50%);

CSS3 位移
#d3{
        position: fixed;
        top:30%;
        left:50%;
        transform: translate(-50%);
        width:300px;
        height:100px;
        background: #B948FF;
    }
    元素先向左移動父元素寬的50%，後以自身為主，沿X軸向右移動自身的寬度的50%，正好居中
    （IE 10 以下不支援此屬性）

實用程式碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中</title>
    <style>
        #d1{
            width:300px;
            height:100px;
            background: #f0f;
            margin:20px auto;
        }

        #d2{
            text-align 
: center;
        }

        #d2>div{
            display: inline-block;
            width:300px;
            height:100px;
            background: #aff;
        }

        #d3{
            position: fixed;
            top:60%;
            left:50%;
            transform: translate(-50%);
            width:300px;
            height:100px;
            background: #B948FF;
        }

        #d4{
            width: 800px;
            height:200px;
            border: 2px solid #000;
        }

        #d4>div{
            position: relative;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width:300px;
            height:100px;
            background: #FFC615;
        }
    </style>


</head>
<body>

    <div id="d1"></div>
    <div id="d2">
        <div></div>
    </div>

    <div id="d3"></div>

    <div id="d4" style="">
        <div></div>
    </div>

</body>
</html>

效果圖

這裡寫圖片描述

CSS/html各種div 等元素居中的幾種方法

元素居中這個樣式真是有相當多的頁面都在使用，在這裡，跟大家分享幾種好用的居中方法 1、控制margin - - - - - -margin:0 auto; #d1{ width:500px; heig

Javascript獲取html元素的幾種方法

nbsp code tel html元素參數 ctype regex head html 1.通過id獲取html元素 <!DOCTYPE html> <html> <head lang="en"> <me

元素居中幾種寫法

transform solid bottom pla 所有百分比兼容ie height 必須 /** * 兼容所有瀏覽器，不兼容移動端 * 元素必須有固定寬度高度 */ .box{

css垂直居中幾種方法（二）

play spa light dex bsp png ava ems pre 方法1：table-cell .box1{ display: table-cell; vertical-align: middle; text-a

CSS垂直居中幾種方法

垂直居中佈局很常用到，自己總結下來以後用的話也很方便，算是對自己上網閱讀資料的一個考核 1.不知道自己高度和父容器高度的情況下, 利用絕對定位只需要以下三行： parentElement{ position:relative; } child

js中常用追加元素的幾種方法：append，appendTo，after，before，insertAfter，insertBefore，appendChild

pre gre con 常用 align lin width insert rip js中常用追加元素的幾種方法,點擊下面每個按鈕，即可查看效果我是第一個子元素我是第二個子元素 append appendTo prepend prependTo a

在頁面中隱藏一個元素的幾種方法

osi play hid abs 隱藏一個 bili cit eight 1.display:none，不占據空間，無法點擊； 2.visibility:hidden，占據空間，無法點擊； 3.height:0; overflow:hidden，不占據空間，無法點擊； 4

Js中去除數組中重復元素的幾種方法

method fun eth bsp class prot return index 方法方法1: 1 Array.prototype.method1=function(){ 2 var arr=[]; 3 for(var i=0;i<this.l

CSS實現下拉菜單的幾種方法

ansi display ora ble 下拉技術 body round too PS:轉自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一種:display:none和display:block切換 1 &l

通過Java排序List集合的元素的幾種方法

諸葛 rtt program pac tco getc lis asi new 用Java工具類Collections的sort()方法，對List集合元素進行排序。 Collections提供兩種排序方法：一、Collections.sort(List<T>

獲得元素的幾種方法,和dom中常用的事件

//通過id來獲取元素使用document.getElementsById("id名") 來獲取元素 //返回值為一個元素的物件 <body> <input type="button" value="修改列表背景顏色" id="btn"> &l

jq 追加元素的幾種方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js中常用追加元素的幾種方法</title> <link rel

Javascript迴圈刪除陣列中元素的幾種方法示例

發現問題大家在碼程式碼的過程中，經常會遇到在迴圈中移除指定元素的需求。按照常規的思路，直接一個for迴圈，然後在迴圈裡面來個if判斷，在判斷中刪除掉指定元素即可。但是實際情況往往不會像預想的那樣順利執行。下面以一段Javascript程式碼為例演示這一過程。

獲取App上的元素（幾種方法）

一、java-UISelector()-正則表示式連用： code = ‘new UISelector().text(“我的”).className(“android.widget.TextView”)’ ——注意點：把java語法當成字串賦值給code，jav

【python】 List新增,刪除元素的幾種方法

python中List新增元素的幾種方法 List 是 Python 中常用的資料型別，它一個有序集合，即其中的元素始終保持著初始時的定義的順序（除非你對它們進行排序或其他修改操作）。在Python中，向List新增元素，方法有如下4種方法（append(),extend(),insert()

php獲取陣列第一個元素的幾種方法

1:array_shift();//彈出陣列第一個元素舉例$a=array('new','hello','cool');$new=array_shift($a);$new是第一個元素值,取最後一個元素可以用array_pop(),這種操作會改變原陣列的內容2:array_sl

HTML 頁面載入 Flash 外掛的幾種方法

<span style="font-family:Microsoft YaHei;"><div style="margin-top:-30px;margin-left:-120px;"> <object classid="clsid:d27cdb6e-ae6d-11cf-

iOS去除陣列中重複元素的幾種方法

//第一種：利用NSDictionary的allKeys(allValues)方法。 NSArray *array = @[@"2016-10-1",@"2016-10-9",

未知寬高div水平垂直居中3種方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <!--方法1：一個未知寬高的彈出框，水平垂直居中--&

一千零一夜：檢查陣列包含某一目標元素的幾種方法分析

最近看programcreek的《Simple Java》材料，在 How to Check if an Array Contains a Value in Java Efficiently一文中作者列舉了四中解決方案，分別是使用List、Set、loop、binarySe

CSS/html各種div 等元素居中的幾種方法

元素居中這個樣式真是有相當多的頁面都在使用，在這裡，跟大家分享幾種好用的居中方法

實用程式碼展示

效果圖

相關推薦