css 居中方式

居中分为水平居中垂直居中

1. 水平居中
	1.1 文字
		text-align:center;
	1.2 盒子
		1.2.1:inline-block + text-align 一 center;
		1.2.2:absolute+transform 一 父元素 display:relative;子元素 display:absolute; left:50%;transform: translatex(-50%);
		1.2.3:absolute + margin 一 父元素 display:relative;子元素 display:absolute; left: 0; right: 0; margin:auto;
	1.3 文字/盒子
		flex布局父元素 display:flex; justify-content: center;
2. 垂直居中
	2.1 文字 line-height
		line-height = height
	2.2 盒子
		2.2.1 父元素 display:relative;子元素 display:absolute; top: 50%;transform: translateY(-50%);
		2.2.2: absolute+transform
父元素 display:relative;子元素 displav:absolute: top: 0: bottom: 0: margin:auto:
		2.2.3: absolute + margin
	2.3文字/盒子
		2.3.1 flex布局父元素 displav:flex:alian-items: center:
		2.3.2: table布局父元素 display:table-cell; vertical-align:middle:

css 居中方式_第1张图片

你可能感兴趣的:(css,前端)