css实现元素居中

水平居中一个块元素

给该元素设置宽高，然后添加属性margin: 0 auto;

绝对定位的div居中

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

水平垂直居中

//方法一：
    postion:absolute;width:(x)px;height:(y)px;left:50%;top:50%;margin:-(x/2)px 0 0 -(y/2)px;

//方法二：
    //未知容器宽高，用transform属性。
    position: absolute;width: (x)px;height: (y)px;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);

//方法三：
    //使用flex布局
    .container {display:flex;align-item:center;justify-content:center;}
    <div class='container'>
        <div></div>
        <div></div>
        <div></div>
    </div>

元素水平居中

• 如果是行内元素,给其父元素设置text-align:center,即可实现行内元素水平居中
• 如果是块级元素,给该元素设置margin: 0 auto
• 如果子元素包含float:left属性,则给父元素宽度添加属性fit-content,并配合margin使用
• 使用flex 2012年版本布局, 可以轻松的实现水平居中, 子元素设置: display: flex;justify-content: center;
• 使用flex 2009年版本, 父元素display: box;box-pack: center;box-orient: horizontal;
• 使用CSS3中新增的transform属性, 子元素设置:position:absolute;left:50%; transform:translate(-50%,0);
• 使用绝对定位方式, 以及负值的margin-left, 子元素设置: position:absolute;width:固定;left:50%;margin-left:-0.5宽度;
• 使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:.son{position:absolute;width:固定;left:0;right:0; margin:0 auto;}

元素垂直居中

1,若元素是单行文本, 则可设置 line-height 等于父元素高度;
2,若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align:middle和一个伪元素让内容块处于容器中央
            .parent::after, .son{
                display:inline-block;
                vertical-align:middle;
            }
            .parent::after{
                content:'';
                height:100%;
            }
3,如果元素高度不确定，可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
4,如果元素高度不确定，可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:
            .son{
                position:absolute;
                top:50%;
                -webkit-transform: translate(-50%,-50%);  
                -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }
5,如果元素高度不确定，使用flex 2009版
            .parent {
                  display: box;
                  box-orient: vertical;
                  box-pack: center;
            }
6,如果元素高度确定， 设置父元素相对定位(position:relative), 子元素如下css样式:
            .son{
                position:absolute;
                top:50%;
                height:固定;
                margin-top:-0.5高度;
            }
7,如果元素高度确定，设置父元素相对定位(position:relative), 子元素如下css样式:
            .son{
                position:absolute;
                height:固定;
                top:0;
                bottom:0;
                margin:auto 0;
            }