(期末复习)html元素上下左右置中对齐的三种方法

冲

左右置中方法

设置元素对齐方式，首先先看看它的display属性：
display:inline/inline-block
将父容器设定为text-align:center，就可左右置中
display:block
将元素本身的margin-left和margin-right都设定为auto，就可以左右置中
上下置中就没那么容易啦，下面介绍3种方法

上下居中

对元素本身

1、设置元素的position为absolute
然后设置其top和left都为50%，这个时候就是将元素左上角的位置居中在页面中间，如果想将元素中心在中间的话，就加上：

transform: translateX(-50%) translateY(-50%);

或者：

right: 50%;
bottom: 50%;
transform: translateX(50%) translateY(50%);

先将容器调整成与画面具备相同的大小，然后再设定它的内容的对齐方式

2、Flex-box
flexbox自带了justify-center和aligns-items属性，分别设定主轴和交叉轴的对齐方式，只需要将这两个属性都设置成center即可，元素的内容就会上下左右对齐
3、display:table
这里我们先将父元素的display属性设置成display:table;
设置好宽、高
然后将元素的display属性设置成table-cell，现在这个元素就变成了表格中的“储存格”，这个时候vertical-align属性也在此时生效，将这个值设置成middle即可完成上下置中的效果，最后将text-align设置成center即可。
快去试试吧