HTML学习笔记：通过修改CSS实现文本/DIV居中（垂直居中/水平居中/垂直水平居中）

HTML中，通过修改css实现文本居中/div垂直水平居中的方法 

最通用的办法flex定位：

直接对父元素CSS设置： 

display: flex; 

justify-content: center; 水平居中

align-items: center; 垂直居中

 

此外：

水平居中：

text_align =center 文本行内居中 （父元素）

margin: 0 auto  块内的块居中（子元素的CSS）

margin-left =half of the length px;  已知块的使用长度时（子元素的CSS）

transform:translateX(50%) 不知道块的长度时使用（子元素的CSS）

垂直居中：

height: 和父元素同样大小（子元素的CSS）

display:table-cell; vertical-align: middle; 多行给父元素设置

margin-top: -元素高度的一半px; 设置transform: translateY(-50%);（子元素的CSS）

垂直水平居中：

根据父元素的相对位置，给子元素设置绝对位置：

1. top: 0; right: 0; bottom: 0; left: 0; margin: auto;

2. left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

3. left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);