侵删
一、水平居中
1、行内元素:主要取决于行内元素的父元素是否是块级元素
- 是块级元素
父元素{ text-align:center; }
- 不是块级元素
父元素{ display:block; text-align:center; }
2、块级元素:有宽度是否设定之分
1)方法一
- 定宽
该元素{ margin:0 auto; }
- 不定宽
该元素{ display:block / inline-block; text-align:center; }
2)方法二
父元素{
position:relative;
}
子元素{
position:absolute;
left:50%
}
- 定宽
子元素{ margin:负元素宽度的一半 / transform:translateX(-50%); }
- 不定宽
子元素{ transform:translateX(-50%); }
3)方法三
使用flex布局,不计宽度。
父元素{
display:flex;
justify-content:center;
}
二、垂直居中
1、单行行内元素
将该元素的高度设置为等于盒子的高度
2、多行行内元素
父元素{
display:table-cell;
vertical-align:middle;
}
3、块级元素
1)方法一
父元素{
position:relative;
}
子元素{
position:absolute;
top:50%;
}
- 定宽
子元素{ margin-top:负元素高度的一半 / transform:translateY(-50%); }
- 不定宽
子元素{ transform:translateY(-50%); }
2)方法二
使用flex布局。
父元素{
display:flex;
align-items:center;
}
三、水平垂直居中
1、已知元素的宽高
1)方法一
父元素{
position: relative
}
子元素{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
2)方法二
父元素{
position: relative;
}
子元素{
position: absolute;
left: 50%;
top:50%;
margin-left:负元素宽度的一半;
margin-top:负元素高度的一半;
}
2、未知元素的宽高
1)方法一
父元素{
position:relative;
}
子元素{
position:absolute;
left:50%;
top:50%;
transform:translateX(50%);
trasform:translateY(50%);
}
2)方法二
使用flex布局。
父元素{
justify-content:center;
align-items:center;
}