水平居中
-
子元素宽度指定：
- 用法
.child{
width:;
margin:0 auto;
}
-
子元素宽度指定：width+position+margin
- 用法：子元素给定宽度，子元素postion:absolute;，子元素margin-left:宽度一半
.child{
position:absolute;
top:0;
left:50%;
width:;
margin:-width/2;
}
-
inline-block + text-align
- 用法
.parent{
text-align:center;
}
.child{
display:inline-block;
}
缺点：child中的文字也会居中显示，可以子元素text-align:left恢复左侧显示
-
table + margin
- 用法
.child{
display:table;
margin:0 auto;
}
-
position + transform
- 用法
.parent{
position:relative;
}
.child{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
-
flex + margin
- 用法
.parent{
display:flex;
}
.child{
margin:0 auto;
}
注：子元素的高度会默认为父元素的高度
-
flex + justify
- 用法
.parent{
display:flex;
justify-content:center;
}
垂直居中
- 给定子元素的高度：position + margin
- 用法
.parent{
position:relative;
}
.child{
position:absolute;
top:0;
bottom:0;
left:0;
margin:auto 0;
}
-
给定子元素的高度：position + margin
- 用法
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:0;
margin-top:-width/2;
}
-
tabel-cell + vertical
- 用法
.parent{
display:table-cell;
vertical-align:middle;
}
- position + transform
- 用法
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
}
-
flex + align-items
- 用法
.parent{
display:flex;
align-items:center;
}
水平垂直居中
-
给定宽度和高度：position + margin
- 用法：
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
margin-left:-宽度的一半;
margin-top:-高度的一半;
width:宽度;
height:高度;
}
- 给定宽度和高度：position + margin
- 用法：
.parent{
position:relative;
}
.child{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:xxx;
height:xxx;
}
-
position + transform
- 用法
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
inline-block + text-align + table-cell + vertical-align
用法
.parent{
display:table-cell;//加这个才能实现垂直居中
text-align:center;//用于水平居中
vertical-align:middle;//用于垂直居中
}
.child{
display:inline-block;
}
-
flex + align-items + justify-content + align-items
- 用法
.parent{
display:flex;
align-items:center;
justify-content:center;
}
左右布局：左侧定宽，右侧自适应
-
float + overflow
- 使用：
//左侧可以不设定宽度，不设定，则为left内部的文字的宽度
//如果不设置宽度，会导致文字过多是，覆盖右侧
.left{
float:left;
}
.right{
overflow:hidden;//添加后
}
-
float + margin
- 使用
//左侧可以不设定宽度，不设定，则为left内部文字的宽度,但是因为margin一般设置为left的宽度
//如果不设置可能会导致超出设置margin值的情况
.left{
float:left;
}
.right{
margin-left:left的宽度;//一般为left的宽度，但是具体大小可以自己定义
}
-
table
- 使用
.parent{
display:table;
}
.left{
width:100px;
}
.left,.right{
display:table-cell;
}
-
flex
- 使用
.parent{
display:flex;
}
.right{
flex:1;
}
三列布局
两列定宽一列自适应
-
左中定宽，右自适应
- 使用
.left{
width:100px;
float:left;
}
.mid{
width:100px;
float:left;
}
.right{
overflow:hidden;//不加，right的宽度为父元素的宽度
}
左右定宽，中自适应
-
绝对定位
- 使用
.parent{
position:relative;
}
.left{
position:absolute;
top:0;
left:0;
width:100px;
}
.right{
position:absolute;
top:0;
right:0;
width:100px;
}
.middle{
margin:0 100px;
}
float + margin
使用：注意html的写法
.left{
float：left;
width:100px;
margin-left:-100%;
}
.mid-parent{
width:100%;
float:left;
}
.middle{
margin:0 100px;
}
.right{
float:left;
width:100px;
margin-left:-100px;
}
float + margin
使用：注意html的写法
.left{
float:left;
width:100px;
}
.right{
float:right;
width:100px;
}
.main{
margin:0 100px;
}
