元素居中这个样式真是有相当多的页面都在使用,在这里,跟大家分享几种好用的居中方法
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>