前端元素垂直水平居中的多个方法

创建一个BFC,高度坍塌、居中、margin重合问题均可解决
1、 浮动元素float不为none
2、 绝对定位或固定定位:position:absolute/fixed
3、 行内元素:display:inline-block;
4、 overflow不为visible的块级元素
5、 display值为flow-root、表格单元素table-cell、表格标题table-caption
6、 匿名表格单元格元素

1、水平居中

块级元素
方法一:auto
注意:该元素不可浮动、绝对定位、固定定位

margin: 0 auto;

方法二:calc 注意:两个数值之间必须有空格

position:  relative / absolute / fixed;
left: calc(50% - 元素宽的一半px);    四则运算 
top: calc(50% - 元素高的一半px);		垂直居中

方法三:弹性盒子

父级元素属性
display: flex;		弹性盒子
flex-direction: row;		主轴方向为水平方向,起点在左端
justify-content:center;

方法四:定位

position: absolute;
left: 50%;
margin-left: -元素的一半宽px; / transform: translate(-50%,0);
							   2D变换中的属性,延x轴移动自身的-50%

行内元素

text-align: center;	/* 父元素 */

注意:calc低版本IE不支持


2、垂直居中

行内元素:父级元素属性,并且父级元素必须是块元素
方法一(多行文本失效):这个只表示某一行当中的垂直居中

line-height:父元素的高;   将字体高度调整为div的高度
vertical-align: bottom;			暂未理解,底部对齐

方法二(IE8不支持):
父元素相对定位 relative,必须有固定高度,子元素绝对定位absolute

子元素属性
top: 50%;
transform: translate(0,-50%); / calc(50% - 一半高度) /margin-top: -(一半高度);

方法三:弹性盒子(兼容性问题,IE不支持,移动端浏览器都支持)
原理:交叉轴上的内容在轴上居中

父类属性
display: flex;
align-items:center;(垂直居中)

块级元素
方法一:弹性盒子

display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: center;

方法二:弹性盒子

父元素:display:flex;
子元素:align-self:center;

方法三:vertical-align,IE不兼容

父元素{
    display: table-cell	/ inline-block;
    vertical-align: middle;
}

方法四:绝对定位

父元素relative
子元素{
 position: absolute;
 top: 50%;
 margin-top: -自身高度的一半;
}

方法五:伪元素before

父元素::before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
子元素 {
    display: inline-block;
    vertical-align: middle;
}

方法六:transformY

子元素{
    position: relative;
	top: 50%;
    transform: translateY(-50%);
}

3、水平垂直居中

方法一:
父元素 {
	position: relative;
}
子元素 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

方法二:
父元素{
	position: relative;
	height: 50px;
}

子元素 {
	position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}

方法三:
父元素{
    display: flex;
    justify-content: center;
    align-items: center;
}

4、高度坍塌

方法一:使父元素浮动 float
方法二:清除浮动 clear:both;
方法三:给父级元素固定宽高
方法四:给父元素添加overflow:hidden;
方法五:万能清除法:after伪元素+清除浮动html部分

父元素::after {  
    content: '';
    height: 0;
    clear: both;
    display: block;
}

你可能感兴趣的:(html+css,css,html)