CSS 实现⽗级元素属性display 为block 的元素垂直和⽔平居中的三种⽅法先上代码
效果图
要求，要使类为content的div在类box中⽔平居中。
这中情况下。要是.content在.box中⽔平居中，我想⼤家都会，在.content上添加margin: 0 auto; 修改代码：
<!DOCTYPE html>
<html  lang ="en">
<head >
<meta  charset ="UTF-8">
<title >index </title >
<style >
.box  {
width: 100%;
height: 500px ;
background: green ;
}
.content  {
width: 200px ;
height: 200px ;
background: orange ;
}
</style >
</head >
<body >
<div  class ="box">
<div  class ="content"></div >
</div >
</body >
</html >
background: green;
}
.content {
width: 200px;
height: 200px;
background: orange;
margin: 0 auto; /*⽔平居中*/
}
</style>
现在问题来了，如何使.content垂直居中呢？当然vertical-align:middle肯定是不⾏的。
⽅法⼀、通过top和margin-top
如果要使⽤top那么就得设置.content的position为absolute，那么为什么不⽤relative或fixed呢？
⾸先解释relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
再解释fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本⾝。
因为我们还要设置magin-top的值，使⽤relative会影响.box的⼤⼩，⼤家可⾃⾏试试看看效果，如果使⽤fixed，就会成为相对整个浏览器的定位了。
如果使⽤了absolute那么.content的⽗级.box的position要为relative，修改代码如下：
设置top为50%，margin-top为.content⾼度的⼀半负数值
margin属性怎么用
background: green;
position: relative;
}
.content {
width: 200px;
height: 200px;
background: orange;
margin: 0 auto; /*⽔平居中*/
position: absolute;
top: 50%;
margin-top: -100px;
}
</style>
⼤家发现，垂直⽅向是居中了，怎么⽔平居中消失了呢。就像解释.content 的position为什么不能为relative的原因相似，使⽤
absolute(元素框从⽂档流完全删除，并相对于其包含块定位。包含块可能是⽂档中的另⼀个元素或者是初始包含块。元素原先在正常⽂档流中所占的空间会关闭，就好像元素原来不存在⼀样。元素定位
后⽣成⼀个块级框，⽽不论原来它在正常流中⽣成何种类型的框)就不会影响原来的⽂档流了。所以margin属性也就失效了。这样⽔平居中和垂直居中的⽅法类似了：
设置left为50%，margin-left为.content⾼度的⼀半负数值
background: green;
position: relative;
}
.content {
width: 200px;
height: 200px;
background: orange;
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
}
</style>
搞定了，有⽊有！
⽅法⼆、通过top和transform
既然⽤不到margin属性了，那么position值可以设置为relative或absolute
如果使⽤absolute那么⽤法跟⽅法⼀差不多，只需要把margin-top: -100px；替换成transform: translateY(-50%);
background: green;
position: relative;
}
.content {
width: 200px;
height: 200px;
background: orange;
position: absolute;
top: 50%;
transform:translateY(-50%);
left: 50%;
margin-left: -100px;
}
</style>
或者把margin-top: -100px；和margin-left: -100px；去掉换成
<style>
.box {
width: 100%;
height: 500px;
background: green;
position: relative;
}
.content {
width: 200px;
height: 200px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
</style>
如果使⽤relative，代码为：
<style>
.box {
width: 100%;
height: 500px;
background: green;
}
.content {
width: 200px;
height: 200px;
background: orange;
position: relative;
top: 50%;
transform:translateY(-50%);
margin: 0 auto;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。