一眼便知CSS水平、垂直布局

写在前面

以下代码均通过博主测试验证，是没有问题的，只需要根据不同的情况灵活引用不同的代码即可。以下给出的代码全都是CSS代码，需要放在CSS选择器里面。

水平居中

1.普通的文本，写在父元素的选择器上

		text-align: center;

2.行内元素，如span、strong等，写在父元素的选择器上

		text-align: center;

3.行内块级元素，写在父元素的选择器上

		text-align: center;

4.行内替换元素，如img等，写在父元素的选择器上

		text-align: center;

5.块级元素，写在自己的选择器上

		margin: 0 auto;

6.通过定位实现，通常用于块级元素上，写在自己的选择器上

		position: absolute;
            	left: 50%;
           	transform: translateX(-50%);

7.通过flex布局实现，通常用于块级元素上，写在父元素的选择器上

		display: flex;
            	justify-content: center;

8.通过grid布局实现，通常用于块级元素上，写在父元素的选择器上

		display:grid;
            	justify-items:center;

垂直居中

1.普通的文本，写在父元素的选择器上

		height: 300px;
            	line-height: 300px;

即 line-height=height，多行文本则不同

2.行内元素，如span、strong等，写在父元素的选择器上

		height: 300px;
            	line-height: 300px;

即 line-height=height

3.行内块级元素

单行时，写在父元素的选择器上

		height: 300px;
            	line-height: 300px;

即 line-height=height

多行或有固定高度时，
写在父元素的选择器上，(line-height=height)

		height: 300px;
            	line-height: 300px;

写在自己的选择器上，

		vertical-align: middle;

4.行内替换元素，如img等

单行时，写在父元素的选择器上

		height: 300px;
            	line-height: 300px;

即 line-height=height

多行或有固定高度时，
写在父元素的选择器上，(line-height=height)

		height: 300px;
            	line-height: 300px;

写在自己的选择器上，

		vertical-align: middle;

5.通过定位实现，通常用于块级元素上，写在自己的选择器上

		position: absolute;
            	top: 50%;
            	transform: translateY(-50%);

6.通过flex布局实现，通常用于块级元素上，写在父元素的选择器上

		display: flex;
            	align-items: center;

7.通过table-cell布局实现，通常用于块级元素上，写在父元素的选择器上

		 display: table-cell;
            	 vertical-align: middle;

居中布局（水平和垂直居中）

可组合使用以上的多种办法，这里博主给常用的简单的两组做法

1.通过定位实现，通常用于块级元素上，写在自己的选择器上

		position: absolute;
            	top: 50%;
            	left: 50%;
            	transform: translate(-50%,-50%);

2.通过flex布局实现，通常用于块级元素上，写在父元素的选择器上

		display: flex;
            	justify-content: center;
            	align-items: center;