css知识点总结之——实现居中布局

css实现居中布局

水平居中：

      块级元素：设置宽度且设置margin:0 auto;

      行内元素：设置text-align: center;

垂直居中 ：

      行内元素：设置 line-height 和 height 相等

      块级元素：父元素设置相对布局 

             已知高度：子元素设置绝对布局 top: 50%;，再设置 margin-top为负的二分之一自身高度；

             未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

水平垂直居中 （前面两种方法父元素需设置相对布局） ：

        定高定宽：先设置绝对布局 top: 50%; left: 50%; 再为子元素设置二分之一自身高、宽度的负 margin-top

和margin-left；

        高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);

        Flex布局：为父元素设置display：flex; justify-content: center; align-items: center;