水平居中
- 行内元素水平居中
给它的父级元素设置
text-align:center;
- 块级元素水平居中
给该元素设置margin值
margin:0 auto;
- 子元素有浮动
对父元素进行特殊设置
width:fit-content;
margin:0 auto;
- 使用弹性盒子（老版本）
对父元素进行设置
display:box;//声明弹性盒模型
box-orient:horizontal;//确定子元素方向，horizontal水平,vertical垂直
box-pack:center;//盒子内部剩余空间对齐表现
- 使用弹性盒子（新版本）
对父元素进行设置
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;
垂直居中
- 单文本内容
line-height:100px;//line-height==父元素高度值
- 行内块级元素（即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动态计算
水平居中元素应设置为绝对定位,获取元素的位置,距离浏览器左边，上边的距离,并且进行赋值
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实现元素的水平垂直居中
获取元素
获取浏览器可视宽度$(window).width();
获取浏览器可视高度$(window).height();
元素距离浏览器左边的距离left:($(window).width()-元素.width())/2
元素距离浏览器上边的距离top:($(window).height()-元素.height())/2
resize:当调整浏览器窗口的大小时，发生 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
});
网友评论