实现水平/垂直居中

css实现水平/垂直方向居中

在开始介绍如何实现水平/垂直方向居中之前,需要先介绍一下行内元素块级元素

行内元素的特点就是
  • 和其他元素在同一行
  • 可以设置 padding,margin,line-height
  • 宽高由内容撑开,不能自己设置宽高
  • 行内元素只能容纳文本或其他行内元素
  • 常见的内联样式: a,img,input,select,span,textarea,font
块级元素
  • 总是在新行上开始,占据一整行
  • 高度,行高以及内外边距都能设置
  • 宽度和高度可以随意设置
  • 可以容纳块级元素或者行内元素
  • 常用的块级元素: div,p,table,form,h标签,dl,ol,ul,li

居中方式一共分为:水平居中,垂直居中,水平垂直居中

1.水平居中

1.1 行内元素的水平居中

利用text-align:center可以实现在块级元素内部的行内元素水平居中。
此方法对行内元素(inline),行内块(inline-block),行内表(inline-block),inline-flex元素水平居中都有效。

1.2 块级元素水平居中

可以通过把固定宽高的块级元素的 margin-topmargin-right 设为auto,就可以试块级元素水平居中了。

    <div>
        <p class="center-block">哈哈哈哈哈</p>
    </div>
    div {
        height:100px;
        border:2px dashed #f69c55;
    }
    .center-block {
        margin:0 auto;
        width:8rem;
    }

需要注意的是,需要居中的元素是必须要设置宽度的。

1.3 多块级元素水平居中

实现的条件就是利用 inline-block ,通过这个属性,可以让元素变成一个行内块级元素。然后利用 text-align 的值为 center 设置即可

还有一种方式就是利用flex布局,通过设置justify-content: center;就可以了。

flex的教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2.垂直居中

2.1 单行行内元素垂直居中

通过设置内联元素的高度和行高相等,从而使行内元素居中

    .box{
        height:12px;
        line-height:12px;
    }

2.2 多行元素垂直居中

利用表格布局vertical-align: middle 可以实现子元素的垂直居中

    .farther{
        display:table;
    }

    .children {
        display:table-cell;
        vertical-align:middle;
    }

利用flex布局,也是可以完成的。之后我将不再写出来,因为flex布局,可以实现上面的所有居中排列。详细就去看flex的教程就好了。

2.3 块级元素垂直居中

如果已知居中元素的高度和款读,垂直居中就比较容易了,可以通过绝对定位的50%来实现。具体代码如下

    .farther {
        height:140px;
        position:relative;
    }
    .children {
        position:absolute;
        top:50%;
        height:100px;
        /* 这里的margin-top 是为了减掉元素本身的一半,让他可以居中*/
        margin-top: -50px;  
    }

如果是未知高度的块级元素,可以借助css3 的 transform属性向Y轴反向偏移50%,实现垂直居中

    .farther {
        height:140px;
        position:relative;
    }

    .children {
        position: absolute;
        top:50%;
        transform: translateY(-50%);
    }

3 水平垂直居中

通过 margin 平移元素整体宽度的一半,使元素水平垂直居中。

    .father {
        height: 140px;
        position: relative;
    }

    .children {
        width:200px;
        height: 80px;
        position:absolute;
        top:50%;
        left:50%;
        margin: -40px 0 0 -100px;
    }

3.2 未知宽高元素的水平垂直居中

利用2D变换,在水平和垂直方向都反向平移宽高的一半,从而使元素水平居中垂直。

    .farther {
        height:140px;
        position:relative;
    }
    .children {
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

最后还有就是用flex


以上

参考文献:https://www.cnblogs.com/ghq120/p/10939835.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。