水平居中
- 行內(nèi)元素水平居中
給它的父級元素設置
text-align:center;
- 塊級元素水平居中
給該元素設置margin值
margin:0 auto;
- 子元素有浮動
對父元素進行特殊設置
width:fit-content;
margin:0 auto;
- 使用彈性盒子（老版本）
對父元素進行設置
display:box;//聲明彈性盒模型
box-orient:horizontal;//確定子元素方向歌殃，horizontal水平,vertical垂直
box-pack:center;//盒子內(nèi)部剩余空間對齊表現(xiàn)
- 使用彈性盒子（新版本）
對父元素進行設置
display:flex;
flex-direction:row;//設置主軸方向
just-content:center;//主軸方向空間對齊方式
- transform方法
父元素的position設置為relative,對子元素進行設置
position:absolute;
left:50%;
transform:translateX(-50%);//或translate(-50%,0)
- margin-left 負值
父元素的position設置為relative,對子元素進行設置
position:absolute;
left:50%;
margin-left:-子元素寬度一半；
- 子元素絕對定位
對子元素進行設置
position:absolute;
top:0;
bottom:0;
left:0;
right:0
margin:0 auto;
垂直居中
- 單文本內(nèi)容
line-height:100px;//line-height==父元素高度值
- 行內(nèi)塊級元素（即display為inline-block）
為父元素添加偽類
.parent ::after{
content:"";
height:100%;
}
.parent ::after, .son{
display:inline-block;
vertical-align:middle;
}
- 子元素以表格形式渲染
父元素display設置為table，再設置子元素
display:table-cell;
vertical-align:middle;
- flex布局
設置父元素
display:box;
box-orient:vertical;
box-pack:center;
- flex布局
設置父元素
display:flex;
flex-direction:column;
align-center:center;
- margin負半值
父元素position：relative练慕，再設置子元素
position:absolute;
top:50%;
height:固定值民轴；
margin-top: -高度的一半管毙；
- 子元素相對定位
父元素position：relative悯搔，再設置子元素
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto 0;
- 需要在居中元素前面放一個空塊級元素(比如div)即可,然后設置這個div的高度為50%,margin-bottom為元素高度的一半,而且居中元素需要清除浮動,需要注意的是,使用這種方法,如果你的居中元素是放在body中的話,需要給html,body設置一個height:100%的屬性
<div class="box"></div>
<div class="content">Content</div>
</pre>
<pre>
html,body{height:100%;}
.box{
height:50%; /*相對父元素的高度的50%*/
margin-bottom:-120px;
}
.content{
clear:both;/*清除浮動*/
width:240px;
height:240px;
position:relative;/*只能用相對定位*/
background:green;
}
水平垂直居中
- 對于文本圖片
line-height:高度灾常；
tex-align:center;
- 定寬定高
父元素為position：relative,再對子元素進行設置
position:absolute;
left:50%;
top:50%;
margin-left:-寬度一半；
margin-top：-高度一半发魄；
- 絕對定位+margin法
對子元素進行設置
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
- 使用js動態(tài)計算
水平居中元素應設置為絕對定位,獲取元素的位置,距離瀏覽器左邊盹牧，上邊的距離,并且進行賦值
left:(瀏覽器的寬度-元素的寬度)/2
top:(瀏覽器的高度-元素的高度)/2
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";
- 使用jQuery實現(xiàn)元素的水平垂直居中
獲取元素
獲取瀏覽器可視寬度$(window).width();
獲取瀏覽器可視高度$(window).height();
元素距離瀏覽器左邊的距離left:($(window).width()-元素.width())/2
元素距離瀏覽器上邊的距離top:($(window).height()-元素.height())/2
resize:當調(diào)整瀏覽器窗口的大小時，發(fā)生 resize 事件
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
});
