[CSS布局]-水平居中-学习笔记

W3.org官方网站： https://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins
参考GitHub项目： https://github.com/Sweet-KK/css-layout
wiki： https://www.sweet-kk.top/css-layout/#/
实例： https://www.sweet-kk.top/css-layout-demo/html/index.html

text-align

控制行内内容（文字、行内元素、行内块级元素）如何相对它的块父元素对齐
text-align只应用于块级元素的内联内容，所以把元素的text-align设为center不能将该元素居中。
比如：

<div id="parent">
   <div id="son1">                                   
     <h1>Test</h1>
     <p>
      This is paragraph text, but you kenw that,  Whinthin tne content of this paragraph floated.
      <img src="images/xiamu.jpg" style="float: left;" alt="xiamu">
      The containing block for the floated image is the paragraph.
      <img src="images/mao.jpg" style="float: right;" alt="mao">
     </p>
   </div>
</div>

                #parent {
                    text-align: center;
                    width: 100px;
                }
                #son1 {
                    width: 600px;
                }
                img {
                    max-width: 20%;
                }

效果如图：

如果#parent选择器加一行float: right;则会变成下图。所以充分说明它是相对于父元素的。

如果图片没有浮动，则按照文档流依次排列

单个块级元素

margin-left和margin-right设置为相等的长度
eg: p { width: 100px; margin-left: auto; margin-right: auto; }

#son {
  width: 20px;//定宽，值不能为auto且宽度小于父元素。要不然的话，宽度和父元素一样。
  margin: 0 auto;
}

多个块级元素

<div style="height: 100px; width: 100px; background: silver; text-align: center;">
            <div style="height: 30px; width: 20px; background: #991231; display: inline-block;"></div>
            <div style="height: 30px; width: 20px; background: #A91111; display: inline-block;"></div>
</div>

#parent{text-align: center;}
.son{display: inline-block;} /*改为行内或者行内块级形式，以达到text-align对其生效*/

• 优点：简单，容易理解，兼容性非常好
• 缺点：只对行内内容有效；属性会继承影响到后代行内内容；块级改为inline-block换行、空格会产生元素间隔

position

原理：子绝父相，top、right、bottom、left的值是相对于父元素尺寸的，然后margin或者transform是相对于自身尺寸的，组合使用达到水平居中的目的

#parent{
height: 200px;
width: 200px; /*定宽*/
position: relative; /*父相*/
background-color: #f00;
}

#son{
position: absolute; /*子绝*/
left: 50%; /*父元素宽度一半,这里等同于left:100px,相当于把子div左边缘移到了父元素的中间位置*/
transform: translateX(-50%); /*自身宽度一半,等同于margin-left: -50px;*/ 这里再往回(左)移动子div的一半
width: 100px; /*定宽*/
height: 100px;  // 定高
background-color: #00ff00;
}

优缺点:

• 优点：使用margin-left兼容性好；不管是块级还是行内元素都可以实现
• 缺点：代码较多；脱离文档流；使用margin-left需要知道宽度值；使用transform兼容性不好（ie9+）

transform: none|transform-functions;

transform:
translateX(-50%); //表示沿X轴向左移动自身元素宽度的一半
rotate(21deg); // 表示顺时针旋转21度

参考——>https://www.w3school.com.cn/cssref/pr_transform.asp

任意个元素（flex）

#parent {
 display: flex;
 justify-content: center;
}

优缺点：

• 优点：简单，易理解
• 缺点：PC端兼容性不好

总结：

text-align: center;（子元素设置为display: inline/inline-block）
margin: 0 auto;
子绝父相；
flex（考虑兼容）；