码迷,mamicode.com
首页 > 其他好文 > 详细

div垂直居中的方法

时间:2021-04-01 13:41:10      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:布局   items   nsf   splay   pos   san   orm   ems   family   

父元素:box1,子元素:box2;

持续补充中。。。。。

一、子div定宽高

1. flex布局

.box1{
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display: flex;
  align-items: center;
}
.box2{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

2.  定位+上下左右为0

.box1{
  width: 300px;
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.box2{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

3. 定位+平移translate

.box1{
  width: 300px;
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.box2{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

 

  

  

 

div垂直居中的方法

标签:布局   items   nsf   splay   pos   san   orm   ems   family   

原文地址:https://www.cnblogs.com/zhangruiqi/p/14604721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!