阅读 3279

css水平居中 垂直居中 水平垂直居中

blog.csdn.net/freshlover/…

水平居中

  • 行内元素:text-align:center;
  • flex布局:display:flex; justify-content:center;
  • 常用(前提:已设置width值):margin-left:auto; margin-right:auto; margin:0 auto;
  • 不定宽块状元素水平居中:改变块状元素的 dispaly 属性为 inline, 然后给父级设置 text-aline:center 来实现水平居中, 这种方法的缺点是不能再给元素设置宽高了
<div style="text-align: center;">
      <div style="display: inline;">不定宽块状元素水平居中</div>        
</div>
复制代码

垂直居中

  • 行高:height:100px;line-height:100px;
  • table-cell:

html

<div class="box box1">
       <span>垂直居中</span>
</div>
复制代码

css

.box1{
   display: table-cell;
   vertical-align: middle;
   text-align: center;        
}
复制代码
  • flex布局:display: flex; justify-content:center; align-items:center;

水平垂直居中

  • 方案1:position 元素已知宽度 父元素设置为:position: relative; 子元素设置为:position: absolute;距上50%,据左50%,然后减去元素自身宽度的距离就可以实现

html

<div class="box">
   <div class="content">
   </div>
</div>
复制代码

css


.box {
   background-color: #FF8C00;
   width: 300px;
   height: 300px;
   position: relative;
}
.content {
   background-color: #F00;
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -50px 0 0 -50px;
}
复制代码
  • 方案2 如果元素未知宽度,只需将上面例子中的margin: -50px 0 0 -50px;替换为:transform: translate(-50%,-50%);

  • 方案3 flex布局:display: flex; justify-content:center; align-items:center;

  • 方案4 不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行:

css

parentElement{
       position:relative;
   }

childElement{
       position: absolute;
       top: 50%;
       transform: translateY(-50%);

}

复制代码
  • 若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可

css

parentElement{
       height:xxx;
   }

   .childElement {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
   }

复制代码
文章分类
前端
文章标签