个人笔记-css实现盒子模型水平居中和垂直居中

CSS实现盒子模型水平居中的方法

1、margin+width

适用于盒子的宽度是已知的

.child {

    width: 50px;

    margin: 0 auto;

}

2、text-align+inline-block

适用于盒子的宽度是未知的

.parent {

    text-align: center;

}

.child {

    display: inline-block;

}

3、float+position

适用于盒子的宽度是未知的

.between {

    position: relative;

    left: 50%;

    float: left;

}

.child {

    position: relative;

    right: 50%;

}

 

4、position

适用于盒子的宽度是未知的

.parent {

    position: relative;

}

.between {

    position: absolute;

    left: 50%;

}

.child {

    position: relative;

    right: 50%;

}

CSS实现盒子模型垂直居中的方法

1、position+transform

.parent {

    position: relative;

    width: 200px;

    height: 200px;

}

 

.child {

    position: absolute;

    top: 50%;

    transform: translate(0%, -50%);

}

 

2、flex布局

.parent {

    display: flex;

    align-items: center;

}

 

CSS实现盒子模型水平垂直居中方法

1、position+tranform

.parent {

    position: relative;

}

 

.child {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);

}

2、position

.parent {

    position: relative;

}

 

.child {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

}

3、flex

.parent {
	    	width: 500px;
		height: 500px;
		background-color: yellow;
		display: flex;/*子元素都会变成行内块级元素*/
		justify-content: center;
		align-items: center;/*单行垂直居中*/
		/*align-content: center; 多行垂直居中*/
	}

	.child {
		width: 100px;
		height: 100px;
		background-color: saddlebrown;
		margin-left: 10px;
	}