CSS - 实现垂直居中的几种方式

内容简介：translateflex和margin:auto2. 元素为为定宽定高（自身包含尺寸的元素）的元素

display: flex;
justify-content:center;
align-items:Center;

position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;

.box{
    display: flex;
    text-align: center;
}
.box span{margin: auto;}

position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;

width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0;

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

关注我们，获取更多IT资讯^_^

查看所有标签

• 完美实现浮动元素横排居中显示
• CSS实现元素居中原理解析
• CSS布局：如何实现居中布局？
• 垂直居中的几种实现方式
• Css实现垂直居中的几种方法
• CSS/CSS3 实现 居中（水平&垂直）

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。