2. 程式人生 > >div 垂直居中的六種方法

div 垂直居中的六種方法

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

利用CSS進行元素的水平居中，比較簡單，行級元素設定其父元素的text-align center，塊級元素設定其本身的left 和 right margins為auto即可。本文收集了六種利用css進行元素的垂直居中的方法，每一種適用於不同的情況，在實際的使用過程中選擇某一種方法即可。

Line-Height Method

line height demo
試用：單行文字垂直居中，demo

程式碼：

html

1
2
3

<div id="parent">
<div id="child">Text here</div>
</div>

css

1
2
3

#child
 
 {
line-height: 200px;
}

垂直居中一張圖片，程式碼如下

html

1
2
3

<div id="parent">
<img src="image.png" alt="" />
</div>

css

1
2
3
4
5
6

#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

CSS Table Method

table cell demo

適用：通用，demo

程式碼：

html

1
2
3

<div id="parent">
<div
 
 id="child">Content here</div>
</div>

css

1
2
3
4
5

#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}

低版本 IE fix bug：

1
2
3

#child {
display: inline-block;
}

Absolute Positioning and Negative Margin

absolute positioning and negative margin demo

適用：塊級元素，demo

程式碼：

html

1
2
3

<div
 
 id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9

#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

Absolute Positioning and Stretching

absolute positioning and vertical stretching demo

適用：通用，但在IE版本低於7時不能正常工作，demo

程式碼：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11

#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}

Equal Top and Bottom Padding

vertical centering with padding demo

適用：通用，demo

程式碼：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6

#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}

Floater Div

vertical centering with floater div demo

適用：通用，demo

程式碼：

html

1
2
3
4

<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11

#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}

相關推薦

如何讓DIV水平和垂直居中三種方法

方法1 CSS實現水平和垂直居中 要讓DIV水平和垂直居中，必需知道該DIV得寬度和高度，然後設定位置為絕對位置，距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，最後將該DIV分別左移和上移，左移和上移的大小就是該D

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

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

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

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

css垂直居中七種方法

Margin:0 auto; 適用於塊狀元素具有寬高。不是用於文字居中。 text-align：center可實現文字居中，vertical-align垂直居中文字；可用於內聯元素的居中 text-align+line-height設定與height同大時，文字會水平垂直居中。

垂直居中四種方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直水平居中</title> </head> <style>

CSS垂直居中幾種方法

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

div 垂直居中的六種方法

利用CSS進行元素的水平居中，比較簡單，行級元素設定其父元素的text-align center，塊級元素設定其本身的left 和 right margins為auto即可。本文收集了六種利用css進行元素的垂直居中的方法，每一種適用於不同的情況，在實際的使用過程中選擇某

CSS佈局——讓一個div垂直居中，8種實用的方法

1、height + line-height 這個是大家最熟悉的垂直居中的方式（之一），但是這種方法只能用於單行文字。 2、line-height + line-block 這種方法是將多行文本當成一行文字對待，即在文字的外層包一層div，然後將其設定為inline-b

總結div裏面水平垂直居中的實現方法

上下左右 代碼 ont ems ott ima ext align 定位 　　最近經常碰到要垂直居中的問題，所以想著總結一下：關於如何設置小盒子在大盒子裏面水平垂直方向同時居中的實現方法有很多種，下面僅列舉了常用的幾種。 　　首先看一下要實現的效果圖及對應的html代碼：

div垂直居中-CSS元素垂直居中方法

div垂直居中-CSS元素垂直居中方法分2類： 1、文字垂直居中的解決方案-2種 https://edu.csdn.net/course/play/9950/211677 2、塊級元素垂直居中的解決方案-6種 https://edu.csdn.net/course/play/9950

css的div垂直居中的方法，百分比div垂直居中 2014年11月16日 19922次瀏覽 前言 我們都知道，固定高寬的div在網頁中垂直居中很簡單，相信大家也很容易的寫出來，但是不是固定高寬的d

前言 我們都知道，固定高寬的div在網頁中垂直居中很簡單，相信大家也很容易的寫出來，但是不是固定高寬的div如何垂直居中呢？我們在網頁佈局，特別是手機等web端網頁經常是不固定高寬的div，那麼這些div如何垂直居中呢？這篇文章，我總結一下。 固定高寬div垂直居中 如上圖，固定高寬的很簡單，寫法如下：

css 文字和div垂直居中方法彙總（轉）

link：https://blog.csdn.net/u014607184/article/details/51820508在樣式佈局中，我們經常碰到需要將元素居中。通過css實現元素的水平居中較為簡單：對文字，只需要對其父級元素設定text-align: center;，而

css 文字和div垂直居中方法彙總

在樣式佈局中，我們經常碰到需要將元素居中。通過css實現元素的水平居中較為簡單：對文字，只需要對其父級元素設定text-align: center;，而對div等塊級元素，只需要設定其left和right的margin值為auto。要實現元素的垂直居中，有人會想

html 中div垂直居中的三種方式

1.第一種： <style type="text/css">   <!--   .con_div{   width:400px;   height:300px;   border:1p

關於一個div上下左右居中的css方法

url 定位 居中 gif height left right red web 1：通過position：absolute定位，上下左右的值都設為0，margin:auto；需要知道div的寬高 { width: 64px; height: 64px; b

Java讀取Properties文件的六種方法

java讀取properties文件的方法Java讀取Properties文件有以下六種方法：1。使用java.util.Properties類的load()方法 String fileName="E:/system.properties"; InputStream in = ne

css中固定寬高div與不固定寬高div垂直居中的處理辦法

分配 css代碼 http min har 空間 -i dex round 固定高寬div垂直居中 如上圖，固定高寬的很簡單，寫法如下： 1 position: absolute; 2 left: 50%; 3 top: 50%; 4 width:200px;

Android View移動的六種方法

olly sce extends validate 分割 down star 相反數 raw 如果你將滑動後的目標位置的坐標傳遞給layout()，這樣子就會把view的位置給重新布置了一下，在視覺上就是view的一個滑動的效果。 layout public cl

實現文字圖片垂直居中的總結性方法

play 但是 div table spl items lex middle position 首先附帶HTML代碼 <div class="box box1 box2 box3 box4 box5 box7 box8 box9"> <div&

JS實現數組去重方法總結(極速PC蛋蛋六種方法)

組元 urn 合並 ++i push oop tarray 開始 實現 方法一： 雙層循環，外層循環元素極速PC蛋蛋QQ2952777280【話仙源碼論壇】hxforum.com【木瓜源碼論壇】papayabbs.com，內層循環時比較值 如果有相同的值則跳過，不相同則pu