CSS垂直水平

Posted 2023-02-26 Rank-Bill

在写html的时候大家要明确自己所写的元素是块状元素还是内联元素，不明白的同学可以看之前写的一篇从视图角度充分认识块状与内联元素在浏览器中是如何渲染的。视图角度看块状元素与内联元素

1.弄清楚了块状元素与内联元素后，要分析出自己所写的元素的父元素子元素是什么关系；是块状元素含在块状元素中，还是块状元素内嵌入的是内联元素。弄清楚层次关系后对处理垂直居中||水平居中很大帮助。
2. 整个文档是一个文档节点； 每个 HTML 元素是元素节点； HTML 元素内的文本是文本节点；每个 HTML 属性是属性节点；注释是注释节点

水平居中：

情形1：当元素块(默认/设置成block)+内联（文本节点，默认或设置成inline）时，text-align:center
此时内部元素会继承父节点的属性。通常为块+块，块+内联（若为内联+块的其中块元素也会继承其父节点的属性）
text-align：用户设置文本节点与图片的水平居中等使用，文本的居中依赖于父节点宽度而居中（默认为100%） 如下表示：

    <p style="text-align:center">文本节点</p>

同理img/span/h1…等(inline/inline-block)节点类似于文本节点使用，此时注意在块元素上设置text-align样式，若外部非块元素可以利用display:block等更改居中

<p style="text-align:center">
     <img src="" alt="">
</p>

情形2：当block元素自身有width属性（包括width:0）时：margin:0 auto (上下为零，左右自动居中)此时会自动居中

<span style="display:block">
   <img src="" alt="">
</span>

情形3：元素脱离文档流，含有自身宽度，父元素（relaive）+子（absolute），left：50% margin-left:-(width+padding)/2,或设置box-sizing:border-box此时偏移（width）/2

<div style="position:relative">
  <div style="position:absolute">
  ...
  </div>
</div>

情形4：通用型，使用flex布局设置justify-content:center(RN中justifyContent)

<div style="display:flex;justify-content:center">
</div>

情形5，transform:translate(50%,0),相对自身移动50%可以结合绝对定位使用将自身设置即为元素的大小平移。但是在元素上设置有动画时会影响动画的执行的预期效果

//可用来代替margin-left使用
<p style="transform:translate(50%,0)">
</p>

情形6，未定宽度：父元素设置 float:left position:relative left:50%，子元素：position:relative,left:-50%
relative相对于该元素本身进行移动， 设置其为50%也即是将子元素设置成了，此时子元素的div设置成相对于其移动50%，此时对于元素的50%那么世界就会很美好，设置float:left，让元素自身宽度为元素的宽度。

|================= = - - - - - - - - --(改变的宽度) - - - - - - - - - - -|

<div style="float:left;position:relative ; left:50%">
   <div style="position:relative;left:-50%">
     ...
</div>
</div>

对于未定义的，需要解决的是让其相对于元素本身的偏移