實現元素的水平垂直居中
水平居中javascript
方法1：如果行內元素(自身不具有寬度,高度,也就是說設置寬度,高度,不起做用,由自身內容撐大,好比a,b(加粗),strong(強調),i,span,img,input,select),給其父級元素設置
text-align:center,能夠實現行內元素水平居中,代碼以下示例所示
html內容結構代碼
<div class="spanParent">
<span>span等行內元素水平居中</span>
</div>
<div class="imgParent">
</div>
css層疊樣式代碼css
.spanParent,.imgParent{
width: 100%;
text-align: center;
border-bottom: 1px solid #ccc;
}
方法2:如果塊級元素(
div,
p,
ul,
li,
ol,
h1-h6,
dl,
dt,
dd,
address,
article,
figure,
audio,
video,
section,
table,
canvas,
header,
table,
footer)獨自佔一行,支持寬度和高度，要想實現水平居中:
margin:0 auto;
示例代碼以下:
html 內容結構代碼
<div class="box"></div>
css層疊樣式代碼html
.box{
width: 100px;
height: 100px;
background: yellow;
margin: 0 auto; /*水平居中,上下,左右*/
}
方法3:如果子元素有浮動,爲了讓子元素水平居中,則可讓父元素寬度設置爲
fit-content,
而且配合margin:0 auto,以下代碼所示：
注意這個屬性值fit-content配上margin:0 auto纔會讓其水平居中,目前只有chrome,firfox,Opera瀏覽器支持該屬性值,而且只能實現水平居中,沒法實現垂直居中,
也沒有height:fit-content,該屬性,即便設置了也不生效
以下代碼示例所示:
html 結構代碼
<ul class="parent">
<li>隨筆川跡</li>
<li>itclan</li>
<li>我的簡介</li>
<li>聯繫地止</li>
</ul>
css層疊樣式代碼java
ul,li{
list-style:none;
}
.parent{
width:100%;
width:-moz-fit-content;
width:-webkit-fit-content;
width:fit-content; /*父元素寬度設置fit-content,高度是沒有這樣的寫法的*/
margin:0 auto; /*注意只設置得了水平居中,此方法,垂直居中沒法*/
}
li{
float:left; /*子元素設置了浮動*/
margin:0 5px 0;
}
方法4 使用flex佈局,老版本:設置父元素
display:box;(聲明彈性盒模型),
box-orient:horizontal;(父元素設置,用來肯定子元素的方向,是橫着的仍是豎着的,horizontal是橫着(水平),vertical表示豎着,垂直,),
box-pack:center;(決定盒子內部剩餘空間的對齊表現,這裏是居中,均等地分割多餘空間)
示例代碼以下
html結構代碼
<div class="parent">
<div class="son"></div>
</div>
css層疊樣式代碼css3
.parent{
/*聲明彈性盒子模型*/
display:-webkit-box;
/*用來肯定子元素的方向,是橫着的仍是豎着的,horizontal是橫着的*/
-webkit-box-orient:horizontal;
/*決定盒子剩餘空間的利用對齊方式,center表示居中*/
-webkit-box-pack:center;
/*firefox*/
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
/*opera*/
display:-o-box;
-o-box-orient:horizontal;
-o-box-pack:center;
/*IE瀏覽器*/
display:-ms-box;
-ms-box-orient:horizontal;
-ms-box-pack:center;
/*標準瀏覽器*/
display:box;
box-orient:horizontal;
box-pack:center;
}
.son{
width:100px;
height:100px;
background:red;
}
方法5 使用flex,新版本:設置父元素
display:flex(聲明彈性盒模型),
flex-direction:row(設置主軸方向爲水平方向),
just-content:center(規定主軸方向富裕空間的管理,全部子元素的居中,對應老版本的box-pack)
示例代碼所示:
html內容結構代碼
<div class="parent">
<div class="son"></div>
</div>
css層疊樣式代碼web
.parent{
display:-webkit-flex; /*聲明彈性盒模型,定義彈性容器*/
-webkit-flex-direction:row; /*row設置主軸方向爲水平方向*/
-webkit-justify-content:center; /*定義了在當前行上,彈性項目沿主軸如何排布*/
display:flex;
flex-direction:row;
justify-content:center; /*至關於老版本的box-pack*/
}
.son{
width:100px;
height:100px;
background:blue;
}
方法6 使用css3中新增的transform屬性,子元素設置離x軸50%html結構代碼chrome
<div class="parent">
<div class="son"></div>
</div>
css結構內容代碼canvas
.parent{
position:relative; /*相對定位*/
}
.son{
width:100px;
height:100px;
background:pink;
position:absolute;
left:50%;
transform:translate(-50%,0);/*設置子元素transform:translate(-50%,0)*/
}
方法7 元素使用絕對定位方式,以及負值的margin-left,子元素設置以下
示例代碼以下所示:html內容結構代碼瀏覽器
<div class="parent">
<div class="son"></div>
</div>
css層疊樣式結構代碼 ide
.parent{
position:relative;
}
.son{
width:100px;
height:100px;
position:absolute;
left:50%;
margin-left:-50px; /*-寬度/2*/
background:green;
}
方法8 子元素使用絕對定位方式,
position:absolute以及
top,
left:0,
right:0;
bottom:0,屬性值設置爲0,
margin:0 auto;
html內容結構代碼
<div class="parent">
<div class="son"></div>
</div>
.son{
position:absolute; /*設置絕對定位*/
width:100px; /*寬度固定*/
height:100px;
background:#abcdef;
top:0;
left:0; /*設置top | left | right | bottom都等於0*/
right:0;
bottom:0;
margin:0 auto;
}
垂直居中
方法1,如果單行文本內容,能夠設置line-height等於父元素的高度,注意這是定高的，也就是高度是固定不變的,這種方法只適用於單行文本的元素才適用,好比塊級元素裏面文本,圖片示例代碼所示html內容結構代碼
<div class="parent">
<span>文本垂直居中</span>
</div>
css層疊樣式結構代碼
.parent{
width:400px;
height:100px;
background:red;
line-height:100px;/*line-height:屬性值==元素的高度值*/
}
方法2，如果行內塊級元素，也就是給它設置了
代碼實例以下所示
display:inline-block屬性,這種方法針對一些
img等行內元素,比較經常使用,
vertical-align:middle和一個僞元素內容塊處於容器的中央,
注意要給這個僞類高度設置高度100%，此方法在IE6下失效,IE,7,8,9有用,可是又在IE10,11又失效(IEText測的)
代碼實例以下所示
html結構代碼
<div class="parent">
<img class="son">
</div>
css層疊樣式代碼
.parent{
width:500px;
height:500px;
border:1px solid red;
}
.parent::after, .son{ /*父級元素和子元素都設置display:inline-block*/
display:inline-block;
vertical-align: middle; /*設置vertical-align:middle*/
}
.parent::after{ /*父元素添加一個僞類,而且設置高度100%*/
content:"";
height:100%;
}
img{
border:1px solid blue;
border-left:none;
}
方法3,子元素可用vertical-align:middle(使元素垂直對齊),和display:tab-cell(讓元素以表格形式渲染),父元素使用display:table,讓元素以表格的形式渲染
示例代碼以下所示
html內容結構代碼
<div class="parent">
<div class="son">contentcontentcontentcontentcontentcontentcontent</div>
</div>
css層疊樣式結構代碼
.parent{
display:table; /*讓元素以表格形式渲染*/
border:1px solid red;
background:red;
height:200px;
}
.son{
display:table-cell; /*讓元素以表格的單元表格形式渲染*/
vertical-align:middle;/*使用元素的垂直對齊*/
background:yellow;
}
優勢：
這種方法有高度的限制,此方法能夠要根據元素內容動態的改變高度,是沒有空間的限制,元素的內容不會由於沒足夠的空間而被切斷或者出現滾動條,不定寬和高,可實現元素內容的水平垂直居中缺點：
適合高版本瀏覽器,在IE6-7下沒法正常運行,結構比較複雜,常見用法在移動端佈局的時候，就會用到,可是爲了解決IE6-7中兼容性問題,在子元素外在套一個div,而且使用hack技術,注意父級元素得加高度代碼示例以下所示
html內容結構代碼以下所示
<div class="parent">
<div class="subCase"> <!---給子元素外層套一層div-->
<div class="son">content</div>
</div>
</div>
css層疊樣式代碼以下所示
.parent {
height: 200px;/*高度值不能少*/
width: 200px;/*寬度值不能少*/
display: table;
position: relative;
float:left;
background:red;
}
.subCase {
display: table-cell; /*讓元素以表格的形式進行渲染*/
vertical-align: middle;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.son {
*position:relative;
*top: -50%;
*left: -50%;
}
vertical-align屬性對其
父級塊級元素td,或者th時,生效,而對於
其餘塊級元素,div,p,ul,li等默認狀況下是不支持的,子元素使用vertical-align,那麼父級元素設置
display:table屬性,子元素設置
display:table-cell;
vertical-align:middle
方法4,使用
示例代碼以下
Flex佈局,
display:box(聲明彈性盒模型),
box-orient:vertical;(父元素設置,用來肯定子元素的方向,垂直方向向的,豎着的,horizontal是橫着的),
box-pack:center;(決定盒子內部剩餘空間的對齊表現,這裏居中)
示例代碼以下
html內容結構代碼
<div class="parent">
<div class="son">1</div>
</div>
css層疊樣式代碼
.parent{
height:400px;
display:-webkit-box;
-webkit-box-align:center;
display:box;
box-align:center;
border:1px solid red;
}
.son{
width:100px;
height:100px;
background:yellow;
}
方法5,使用Flex佈局,
display:flex(聲明彈性盒模型),
align-items:center(元素在側軸中間位置,富裕空間在側軸兩側)
flex-direction:coluumn(設置主軸方向爲垂直方向)
優勢：使用display:flex佈局,內容塊的寬高任意,優雅的溢出，可用於複雜的高級佈局技術
缺點:IE678不支持,兼容性處理,火狐，谷歌,歐朋要瀏覽器前綴
示例代碼所示
html內容結構代碼
<div class="parent">
<div class="son">1</div>
</div>
css層疊樣式代碼
.parent{
height:400px;
display:-webkit-flex;
display:flex;
flex-direction: row;/*容器內項目的排列方向(默認橫向排列),row表示沿水平主軸由左向右排列,column沿垂直主軸右上到下 */
align-items: center; /*居中*/
border:1px solid red;
}
.son{
width:100px;
height:100px;
background:orange;
}
方法6,設置父元素相對定位(position:relative),子元素設置絕對定位position:absolute,top:50%,height高度固定,利用margin負半值的方式，讓元素垂直居中
html結構代碼示例所示
<div class="parent">
<div class="son"></div>
</div>
css結構代碼
.parent{
position:relative;
width:400px; /*父元素設置寬度和高度*/
height:400px;
border:1px solid red
}
.son{
width:100px;
height:100px;
position:absolute;
top:50%;
margin-top:-50px; /*-寬度/2*/
background:pink;
}
優勢：適用於全部瀏覽器缺點：父元素空間不夠時,子元素可能不可見,當瀏覽器窗口縮小時,滾動條不出現時,若是子元素設置了overflow:auto,則高度不夠時會出現滾動條
方法7,設置父元素相對定位(position:relative),子元素設置絕對定位,margin:auto 0,高度固定,left | top | right | bottom都設置爲0，可是在IE8低版本瀏覽器如下失效
html內容結構代碼
<div class="parent">
<div class="son"></div>
</div>
css層疊樣式結構代碼
.son{
position:absolute; /*設置絕對定位*/
width:100px; /*寬度固定*/
height:100px;
background:blue;
top:0;
left:0; /*設置top | left | right | bottom都等於0*/
right:0;
bottom:0;
margin:auto 0;
}
方法8,須要在
居中元素前面放一個空塊級元素(好比div)便可,而後
設置這個div的高度爲50%,margin-bottom爲元素高度的一半,並且
居中元素須要清除浮動,須要注意的是,使用這種方法,
若是你的居中元素是放在body中的話,須要給html,body設置一個height:100%的屬性
html結構代碼以下所示
<div class="box"></div> <div class="content">Content</div>
css層疊樣式
html,body{height:100%;}
.box{
/*float:left;*/
height:50%; /*相對父元素的高度的50%*/
margin-bottom:-120px;
}
.content{
clear:both;/*清除浮動*/
width:240px;
height:240px;
position:relative;/*只能用相對定位*/
background:green;
}
優勢:兼容全部的瀏覽器,在沒有足夠的空間下,內容不會被切掉缺點:元素高度被固定死,沒法達到內容自適應,若是居中元素加上overflow,要麼元素出現滾動條,要麼元素被切掉,另外就是一個就是加上了一個空標籤
方法9`:使用內邊距的方式使其垂直居中
html示例代碼以下所示
<div class="parent">
<div class="son">content</div>
</div>
css示例代碼以下所示
.son{
padding:30px 0 30px 0;
border:1px solid red;
}
缺點:使用這種方法不能給容器固定高度,若是加了高度的話,要想要達到效果,那麼要減去對應的高度
水平+垂直居中
如果文本圖片,則可使用line-height:高度；text-align:center
示例代碼以下所示
html結構代碼
<div class="wrap">
文本水平垂直居中顯示
</div>
css結構代碼
.wrap{
width:400px;
height:400px;
text-align:center; /*文本水平居中顯示*/
line-height:400px; /*垂直居中顯示*/
font-size:36px;
border:1px solid red;
}
如果定寬定高,
使用絕對定位position:absolute,left:50%,top:50%,使用margin負半值進行元素的水平垂直居中顯示,代碼以下所示:
html結構內容代碼
<div class="parent">
<div class="son"></div>
</div>
css示例代碼以下所示
.parent{
width:100%;
height:500px;
position:relative;
background:red;
}
.son{
width:100px;
height:100px;
background:pink;
position:absolute;
left:50%;
top:50%; /*top50%*/
margin-left:-50px;/*-(元素寬度/2)*/
margin-top:-50px; /*-(元素高度/2)*/
}
絕對定位absolute+margin:auto,同時,top:0;left:0;right:0,bottom:0這種方式使一個元素水平垂直居中也是比較常見的
html內容結構代碼
<div class="parent"> <div class="son"></div> </div>
css層疊樣式代碼
.son{
position:absolute; /*設置絕對定位*/
width:100px; /*寬度固定*/
height:100px;
background:#abcdef;
top:0;
left:0; /*設置top | left | right | bottom都等於0*/
right:0;
bottom:0;
margin: auto; /*水平垂直居中*/
}
使用js動態計算使其元素水平垂直居中
水平居中元素應設置爲絕對定位,獲取元素的位置,距離瀏覽器左邊，上邊的距離,而且進行賦值
left:(瀏覽器的寬度-元素的寬度)/2
top:(瀏覽器的高度-元素的高度)/2
示例代碼所示
html內容結構代碼
<div id="box"></div>
css示例代碼
#box{
width:100px;
height:100px;
background:red;
position:absolute; /*設置絕對定位*/
}
js代碼
/*
* @desc 利用js控制一個元素的水平垂直居中顯示
*
*/
window.onload = function(){
var oBox=document.getElementById("box"),
left=(document.documentElement.clientWidth-oBox.offsetWidth)/2,
top = (document.documentElement.clientHeight)/2;
oBox.style.left = left+"px";
oBox.style.top = top+"px";
//當屏幕尺寸發生變化時
window.onresize = function(){
var top = (document.documentElement.clientHeight-oBox.offsetHeight)/2,
left = (document.documentElement.clientWidth-oBox.offsetWidth)/2;
oBox.style.top = top+"px";
oBox.style.left = left+"px";
}
}
使用jQuery實現元素的水平垂直居中
獲取元素
獲取瀏覽器可視寬度$(window).width();
獲取瀏覽器可視高度$(window).height();
元素距離瀏覽器左邊的距離left:($(window).width()-元素.width())/2
元素距離瀏覽器上邊的距離top:($(window).height()-元素.height())/2
resize:當調整瀏覽器窗口的大小時，發生 resize 事件
示例代碼
<div id="box"></div>
css層疊樣式代碼
#box{
width:100px;
height:100px;
background:blue;
position:absolute;
}
js代碼
/*
* @dec 利用jQuery實現元素水平垂直居中
* @function getStyle 水平垂直居中元素
* @event resize
*/
$(function(){
getStyle();
function getStyle(){
var oBox = $("#box"),
oW = $(window).width(), //獲取瀏覽器的可視寬度
oH = $(window).height(), //獲取瀏覽器的可視高度
l = (oW-oBox.width())/2, // 元素距離瀏覽器左邊的距離
t = (oH-oBox.height())/2; //元素距離瀏覽器右邊的距離
oBox.css({ //賦值操做,left,top值
left:l,
top:t
});
}
//當調整瀏覽器窗口的大小時,發生 resize 事件
$(window).resize(function(){
getStyle();
})
})
兩種常見佈局:聖盃佈局與雙飛翼佈局
聖盃佈局(左中右結構,兩邊寬度固定,中間自適應)
左邊與右邊,使用絕對定位,左邊left:0,top:0,右邊right:0,top:0,中間使用margin
兩欄佈局,左邊側邊欄固定,右邊主體自使用,左邊主體自適應,右邊側邊欄固定,左側邊欄固定，右主體自適應,左主體自適 應,右側邊欄固定都是聖盃佈局，解決辦法:使用絕對定位,如上,還有就是浮動佈局,彈性盒模型也能夠解決
示例代碼以下:使用絕對定位實現聖盃佈局
html結構代碼
<div class="left">左邊</div> <div class="center">中間</div> <div class="right">右邊</div>
css示例代碼
.left{
width:200px; /*兩邊固定寬度,中間自適應*/
height:600px; /*高度能夠不可,由內容填充*/
position:absolute;
left:0;
top:0;
background:red;
}
.center{
width:100%; /*寬度不固定*/
background:orange;
height:600px;
margin:0 200px;
}
.right{
width:200px; /*兩邊固定寬度,中間自適應*/
height:600px; /*高度能夠不可,由內容填充*/
position:absolute;
right:0;
top:0;
background:green;
}
使用浮動實現聖盃佈局顯示效果
* 利用浮動佈局 * 要注意位置不一樣,實現的效果也會不一樣,設置了浮動,必定要注意清除浮動
示例代碼所示
html內容結構代碼
<div class="left w200">左邊</div> <div class="right w200">右邊</div> <div class="center">中間</div>
css層疊樣式代碼
.w200{
width:200px;
height:600px;
}
.left{
float:left;
background:pink;
}
.right{
float:right;
background:blue;
}
.center{
height:600px;
background:red;
overflow:hidden; /*清除浮動*/
}
利用彈性盒模型老版本display:box實現聖盃佈局,兩邊固定,中間自適應
當你縮放到最小值時,中間的內容會被隱藏,你能夠給中間的盒子設置一個最小寬度值便可
html結構內容代碼
<div class="parent"> <div class="left w200">左邊</div> <div class="center">中間</div> <div class="right w200">右邊</div> </div>
css層疊樣式代碼
.parent{
width:100%;
display:-webkit-box;
-webkit-box-orient:horizontal;
/*決定盒子剩餘空間的利用對齊方式,center表示居中*/
-webkit-box-pack:center;
/*firefox*/
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
/*opera*/
display:-o-box;
-o-box-orient:horizontal;
-o-box-pack:center;
/*IE瀏覽器*/
display:-ms-box;
-ms-box-orient:horizontal;
-ms-box-pack:center;
/*標準瀏覽器*/
display:box;
box-orient:horizontal;
box-pack:center;
}
.w200{
width:200px;
height:600px;
}
.left{
background:#abcdef;
}
.right{
background:yellow;
}
.center{
width:100%;
background:orange;
-webkit-box-flex:1; /*注意的是瀏覽器前綴必定要加*/
-moz-box-flex:1;
-ms-box-flex:1;
-o-box-flex:1;
box-flex:1;
}
利用彈性盒模型新版本display:flex實現聖盃佈局,兩邊固定,中間自適應
html內容結構代碼
<div class="parent">
<div class="left w200">左邊</div>
<div class="center">中間</div>
<div class="right w200">右邊</div>
</div>
css層疊樣式代碼
.parent{
width:100%;
display:-webkit-flex;/*聲明彈性盒模型,定義彈性容器*/
-webkit-flex-direction:row; /*row設置主軸方向爲水平方向*/
/*決定盒子剩餘空間的利用對齊方式,center表示居中*/
-webkit-justify-content:center; /*定義了在當前行上,彈性項目沿主軸如何排布*/
display:flex;
flex-direction:row;
justify-content:center; /*至關於老版本的flex-pack*/
/*firefox*/
display:-moz-flex;
-moz-direction:row;
-moz-justify-content:center;
/*opera*/
display:-o-flex;
-o-direction:row;
-o-justify-content:center;
/*IE瀏覽器*/
display:-ms-flex;
-ms-direction:row;
-ms-justify-content:center;
/*標準瀏覽器*/
display:flex;
flex-direction:row;
justify-content:center;
}
.w200{
width:200px;
height:600px;
}
.left{
background:red;
}
.right{
background:green;
}
.center{
width:100%;
background:pink;
-webkit-flex-flex:1; /*注意的是瀏覽器前綴必定要加*/
-moz-flex-flex:1;
-ms-flex-flex:1;
-o-flex-flex:1;
flex-flex:1;
}
實例:手機端的淘寶佈局,京東上方的搜索欄,一些後臺管理系統,什麼兩邊固定,中間自適應結構,左固定,右自適應或者左自適應,右固定等都是聖盃佈局的體現,不管是使用絕對定位仍是浮動佈局,前二者都會破壞文檔流,使用定位元素會脫離文檔流,浮動會引發一些困擾的bug,好比說忘記清除浮動,設置margin-right,margin:0 auto值都會失效,在移動端佈局上,使用彈性盒模型flex,不管是老版本仍是新版本,對於這種兩列,三列或多列自適應,複雜的佈局,用flex佈局方式,都是很是強大的,可是要注意兼容性,加各瀏覽器前綴,否則的會調試半天也會沒有效果的，css的書寫順序應是選擇漸進加強的方式,從低版本到高版本
好比說下面常見移動端示例參考,可藉助上面的決定定位,浮動,彈性盒模型等實現下面示例上方的搜索導航部分
好比說下面常見移動端示例參考,可藉助上面的決定定位,浮動,彈性盒模型等實現下面示例上方的搜索導航部分
京東移動端頭部搜索欄部分(左中右結構,兩邊固定,中間自適應)
淘寶移動端頭部搜索欄部分(左邊固定,右邊自適應)
雙飛翼佈局(等高佈局)
一個盒子的內容變化,一樣會影響同級(兄弟)高度變換,實時同步變化
示例代碼以下所示
html內容結構代碼
<div class="wrap"> <div class="left">等高佈局等高佈局等高佈局等高佈局等高佈局</div> <div class="right">等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局等高佈局</div> </div>
css層疊樣式代碼
.wrap{
width:1000px;
margin:0 auto;
overflow:hidden;
border:1px solid red
}
.left{
width:300px;
background:red;
float:left; /*左浮動*/
padding-bottom:1000px;
margin-bottom:-10000px;
}
.right{
width:700px;
background:blue;
float:right; /*右浮動*/
padding-bottom:1000px;
margin-bottom:-1000px;
}
總結
本篇主要是圍繞着一個元素在頁面中如何水平垂直居中,分別對行內元素和塊級元素介紹了8種方式元素的水平居中和9種垂直方式元素居中,進而又對一個元素用5種方式實現水平+垂直居中顯示,最終常見兩種佈局,聖盃佈局(使用絕對定位,浮動佈局,彈性盒模性Flex佈局可實現)和雙飛翼(等高)佈局,其中絕對定位與浮動佈局都會破壞元素的文檔流,對於一個元素讓其水平垂直居中顯示很常見,好比說彈框,還有頁面上佈局,對於塊級元素咱們每每第一想到的是margin:0 auto,水平居中顯示,可是有時卻難以想到其餘種方法,對於使用絕對定位方式,設置left,top,right,bottom爲0,配合margin的使用實現水平垂直居中仍是挺巧妙的,同時絕對定位,對於固定寬度高度,用margin負半值的方法實現水平垂直居中顯示也是一種很好的方式,還有display:table的方式實現垂直居中顯示,以及transform結合絕對定位實現元素水平居中顯示,最爲強大的是彈性盒模型Flex佈局,不管是老版本display:box,仍是新版本display:flex對父元素設置該屬性,同時設置子元素的排列方式,也能夠對子元素進行box-flex進行設置,可以很好的達到水平垂直居中顯示,自適應,可是注意該屬性的兼容性,針對不一樣的瀏覽器,要加上瀏覽器的前綴,不然會失效,對於元素水平垂直居中顯示能夠優先考慮css的方式解決(如上方法),對於複雜的實例,也能夠考慮同上文中用js的方式去實現元素的水平垂直居中顯示
如下是本篇提點概要
-
水平居中
方法1：如果行內元素,給其父級元素設置text-align:center,能夠實現行內元素水平居中方法2:如果塊級元素,要想實現水平居中:margin:0 auto;方法3:如果子元素有浮動,爲了讓子元素水平居中,則可讓父元素寬度設置爲fit-content,而且配合margin:0 auto,注意這個屬性值fit-content配上margin:0 auto纔會讓其水平居中,目前只有chrome,firfox,Opera瀏覽器支持該屬性值,而且只能實現水平居中,沒法實現垂直居中,也沒有height:fit-content,該屬性,即便設置了也不生效方法4使用flex佈局,老版本:設置父元素display:box;,box-orient:horizontal;,box-pack:center;實現元素水平居中- . 方法5 使用flex,新版本:設置父元素
display:flex),flex-direction:row(設置主軸方向爲水平方向),just-content:center(規定主軸方向富裕空間的管理,全部子元素的居中,對應老版本的box-pack) 方法6使用css3中新增的transform屬性,子元素設置離x軸50%方法7元素使用絕對定位方式,left:50%,以及margin的負半值方式,margin-left:-寬度的一半方法8子元素使用絕對定位方式,position:absolute以及top,left:0,right:0;bottom:0,屬性值設置爲0,margin:0 auto;
-
垂直居中
方法1,如果單行文本內容,能夠設置line-height等於父元素的高度,注意這是定高的，也就是高度是固定不變的,這種方法只適用於單行文本的元素才適用,好比塊級元素裏面文本,圖片方法2，如果行內塊級元素，也就是給它設置了display:inline-block屬性,這種方法針對一些img等行內元素,比較經常使用,vertical-align:middle和一個僞元素內容塊處於容器的中央,注意要給這個僞類高度設置高度100%，此方法在IE6下失效,IE,7,8,9有用,可是又在IE10,11又失效(IEText測的)方法3,子元素可用vertical-align:middle(使元素垂直對齊),和display:tab-cell(讓元素以表格形式渲染),父元素使用display:table,讓元素以表格的形式渲染方法4,使用Flex佈局,display:box(聲明彈性盒模型),box-orient:vertical;(父元素設置,用來肯定子元素的方向,垂直方向向的,豎着的,horizontal是橫着的),box-pack:center;方法5,使用Flex佈局,display:flex(聲明彈性盒模型),align-items:center(元素在側軸中間位置,富裕空間在側軸兩側)flex-direction:coluumn(設置主軸方向爲垂直方向)方法6,設置父元素相對定位(position:relative),子元素設置絕對定位position:absolute,top:50%,height高度固定,利用margin負半值的方式，讓元素垂直居中方法7,設置父元素相對定位(position:relative),子元素設置絕對定位,margin:auto 0,高度固定,left | top | right | bottom都設置爲0，可是在IE8低版本瀏覽器如下失效方法8,須要在居中元素前面放一個空塊級元素(好比div)便可,而後設置這個div的高度爲50%,margin-bottom爲元素高度的一半,並且居中元素須要清除浮動,須要注意的是,使用這種方法,`若是你的居中元素是放在body中的話,須要給html,body設置一個height:100%的屬性方法9:使用內邊距的方式使其垂直居中
-
水平+垂直居中
- 如果文本圖片,則可使用
line-height:高度；text-align:center - 如果定寬定高,
使用絕對定位position:absolute,left:50%,top:50%,使用margin負半值進行元素的水平垂直居中顯示 絕對定位absolute+margin:auto,同時,top:0;left:0;right:0,bottom:0這種方式使一個元素水平垂直居中也是比較常見的- 使用js動態計算使其元素水平垂直居中
- 使用jQuery實現元素的水平垂直居中
- 如果文本圖片,則可使用
-
兩種常見佈局:聖盃佈局(兩邊寬度固定,中間自適應)與雙飛翼(等高)佈局
- 聖盃(兩邊寬度固定,中間自適應)佈局
- 使用絕對定位實現聖盃佈局
- 使用浮動實現聖盃佈局
- 使用彈性盒模型Flex佈局display-box實現聖盃佈局
- 利用彈性盒模型新版本display:flex實現聖盃佈局
- 雙飛翼(等高)佈局
- 一個盒子的內容變化,一樣會影響同級(兄弟)高度變換,實時同步變化,如上代碼示例所示
- 聖盃(兩邊寬度固定,中間自適應)佈局
相關文章
- 1. CSS3 Flex實現元素的水平居中和垂直居中
- 2. 元素水平垂直居中
- 3. 塊狀元素垂直水平居中
- 4. html 元素垂直水平居中
- 5. DIV元素水平和垂直居中
- 6. 元素垂直水平居中
- 7. 浮動元素水平垂直居中
- 8. CSS實現元素水平/垂直居中的方法
- 9. 元素的水平及垂直居中實現方法二三
- 10. css 實現元素水平垂直居中的幾種方法
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Web Services 平臺元素 - Web Services 教程
- • ☆基於Java Instrument的Agent實現
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS3 Flex實現元素的水平居中和垂直居中
- 2. 元素水平垂直居中
- 3. 塊狀元素垂直水平居中
- 4. html 元素垂直水平居中
- 5. DIV元素水平和垂直居中
- 6. 元素垂直水平居中
- 7. 浮動元素水平垂直居中
- 8. CSS實現元素水平/垂直居中的方法
- 9. 元素的水平及垂直居中實現方法二三
- 10. css 實現元素水平垂直居中的幾種方法