入门:CSS布局

2018-10-12  本文已影响0人  饥人谷_7w7

1. 左右布局

2. 左中右布局

3. 居中

1.水平居中:

2. 垂直居中:

2. 绝对定位:

.parent{
  position: relative;
}
son{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3.水平&垂直居中
1. 绝对定位

postition:absolute
top:50% 
left:50% 
transform:translate(-50%,-50%);

2.margin

.parent{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
 }
.son{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  width:50%;
  height:50%;
  margin:auto;
 }

4. 等其他小技巧

parent{
  display:flex;
  align-items:center;
};
.clearfix::after {
    content: '';
    display: block;
    clear: both;
  }
上一篇 下一篇

猜你喜欢

热点阅读