div居中的几种方式

方式一

1
2
3
4
5
6

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

方式二
可以给父元素添加下面的属性，利用lex布局来实现

1
2
3

display:flex;
align-items:center;
flex-direction:column

方式三
通过定位和变形来实现
给父元素添加position:relative;相对定位。
给自身元素添加position:absolute,绝对定位。
top:50%;使自身元素距离上方”父元素的50%高度”的高度。
1eft:50%;使自身元素距离上方”父元素的50%宽度”的宽度。
transform:translate(-50%,-50%):使自身元素再往左，往上平移自身元素的50%宽度和高度。

1
2
3
4

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

方式四
这个是实现内容文本居中的，坑死了，之前没留意在一个全局的文件加了，后面很多组件里面的内容都居中了，还
一时没发现，虽然想到会不会是全局文件的问题，但一下子眼拙没看到，结果捣鼓半天

1

body{text-align:center}