作者:mobiledu2502933207 | 来源:互联网 | 2023-06-03 20:31
两列或三列布局使用flexfloat左右position:absolute,中间margin-left,margin-right圣杯和双飞翼布局,都是为了实现一个两侧宽度固定,中间
两列或三列布局
- 使用flex
- float
- 左右
position:absolute
,中间margin-left,margin-right
圣杯和双飞翼布局,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。
header
center
left
right
header
center
垂直水平居中
- 水平居中
text-align:center
和块级元素的margin:0 auto;
- table方案,(IE8+)
-
absolute+margin:auto
方案,兼容主流的浏览器;但是需要定义父容器的高度,否则子元素绝对定位会导致父元素的坍塌。
.absolute-aligned {
position: relative;
min-height: 500px;
background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
margin: auto;
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
}
-
absolute+translate
,(IE9+),同样需要设置父元素的高度
.center {
background: hsl(180, 100%, 97%);
position: relative;
min-height: 500px;
}
.center img {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 30%;
}
.center {
background: hsl(240, 100%, 97%);
display: flex;
justify-content: center;
align-items: center;
}
-
calc
方案,IE9+,更适合子元素宽高固定的情况
// 50%是父元素的中心点,减去图片宽度和高度的一半从而达到定位效果
.calc {
background-color: hsl(300, 100%, 90%);
min-height: 350px;
position: relative;
}
.calc img {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}