• CSS水平居中/垂直居中的N个方法


    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记。

    孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:"居中一共有几种写法"呢,哈哈,先备着吧~~各种方法各有利弊,大家自己权衡吧,至少在需要居中时多个思路。

    <center>

    不建议用了。

    text-align:center

    在父容器里水平居中 inline 文字,或 inline 元素

    vertical-align:middle

    垂直居中 inline 文字,inline 元素,配合 DE>display:tableDE> ,DE>display:table-cellDE>,有奇效。

    line-height

    与 height 联手,垂直居中文字

    margin:auto

    <style>
      #ex2_container { width:200px; background-color:yellow; }
      #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }
    </style>
    <div id="ex2_container"><div id="ex2_content">Hello World</div></div>

    hacks, hacks(小技巧)

    有许多 hacks ,负 margin,影子元素 ::before 等。如果你的内容不是固定大小的话,它们大部分是很脆弱的。

    translate(-50%,-50%)

    用 position 加 translate translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。

    示例:

     1 <style>
     2 #ex3_container{
     3 width:200px;
     4 height:200px;
     5 background-color:yellow;
     6 position:relative;
     7 }
     8 #ex3_content{
     9 left:50%; top:50%; 
    10 transform:translate(-50%,-50%);
    11 -webkit-transform:translate(-50%,-50%);
    12 background-color:gray; color:white; position:absolute;
    13 }
    14 </style>
    15 <div id="ex3_container"><div id="ex3_content">Hello World</div></div>

    这个技巧相当嚣张,同样适用于没固定大小的内容,DE>min-widthDE>,DE>max-heightDE>,DE>overflow:scrollDE>等。

    绝对定位居中

    父容器元素:DE>position: relativeDE>

    .Absolute-Center {
       50%;
      height: 50%;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }

    注意:高度必须定义,建议加 DE>overflow: autoDE>,防止内容溢出。

    视口居中

    内容元素:DE>position: fixedDE>,DE>z-index: 999DE>,记住父容器元素 DE>position: relativeDE>

    1 .Absolute-Center.is-Fixed {
    2    50%;
    3   height: 50%;
    4   overflow: auto;
    5   margin: auto;
    6   position: fixed;
    7   top: 0; left: 0; bottom: 0; right: 0;
    8   z-index: 999;
    9 }

    响应式

    百分比宽高,最大、最小宽度均可以,加 padding 也可以

     1 .Absolute-Center.is-Responsive {
     2    60%;
     3   height: 60%;
     4   min- 400px;
     5   max- 500px;
     6   padding: 40px;
     7   overflow: auto;
     8   margin: auto;
     9   position: absolute;
    10   top: 0; left: 0; bottom: 0; right: 0;
    11 }

    偏移

    只要 DE>margin: auto;DE> 在,内容块将垂直居中,top, left, bottom, right 可以设置偏移。

    1 .Absolute-Center.is-Right {
    2    50%;
    3   height: 50%;
    4   margin: auto;
    5   overflow: auto;
    6   position: absolute;
    7   top: 0; left: auto; bottom: 0; right: 20px;
    8   text-align: right;
    9 }

    溢出

    居中内容比父容器高时,防止溢出,加 DE>overflow: autoDE> (没有任何 padding 时,也可以加 DE>max-height: 100%;DE>)。

    1 .Absolute-Center.is-Overflow {
    2    50%;
    3   height: 300px;
    4   max-height: 100%;
    5   margin: auto;
    6   overflow: auto;
    7   position: absolute;
    8   top: 0; left: 0; bottom: 0; right: 0;
    9 }

    调整尺寸

    resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸,确定加了 DE>overflow: autoDE> 。

     1 .Absolute-Center.is-Resizable {
     2   min- 20%;
     3   max- 80%;
     4   min-height: 20%;
     5   max-height: 80%;
     6   resize: both;
     7   overflow: auto;
     8   margin: auto;
     9   position: absolute;
    10   top: 0; left: 0; bottom: 0; right: 0;
    11 }

    图像

    图像同样适用,设置 DE>height: auto;DE>

    1 .Absolute-Center.is-Image {
    2    50%;
    3   height: auto;
    4   margin: auto;
    5   position: absolute;
    6   top: 0; left: 0; bottom: 0; right: 0;
    7 }

    可变高度

    高度必须定义,但可以是百分比或 max-height。不想定义高度的话,用 DE>display: tableDE> (需要考虑 Table-Cell 兼容性)。

    1 .Absolute-Center.is-Variable {
    2   display: table;
    3    50%;
    4   overflow: auto;
    5   margin: auto;
    6   position: absolute;
    7   top: 0; left: 0; bottom: 0; right: 0;
    8 }

    负 margin

    确切知道宽高,负 margin 是宽和高的一半。

    1 .is-Negative {
    2  300px;
    3 height: 200px;
    4 padding: 20px;
    5 position: absolute;
    6 top: 50%; left: 50%;
    7 margin-left: -170px; /* (width + padding)/2 */
    8 margin-top: -120px; /* (height + padding)/2 */
    9 }

    Table-Cell

    参考文章:Flexible height vertical centering with CSS, beyond IE7

    HTML结构:

    1 <div class="Pos-Container is-Table">
    2   <div class="Table-Cell">
    3     <div class="Center-Block">
    4     &lt!-- CONTENT -->
    5     </div>
    6   </div>
    7 </div>

    CSS样式:

    1 .Pos-Container.is-Table { display: table; }
    2 .is-Table .Table-Cell {
    3   display: table-cell;
    4   vertical-align: middle;
    5 }
    6 .is-Table .Center-Block {
    7    50%;
    8   margin: 0 auto;
    9 }

    FlexBox

    参考文章:Designing CSS Layouts With Flexbox Is As Easy As Pie

     1 .Pos-Container.is-Flexbox {
     2   display: -webkit-box;
     3   display: -moz-box;
     4   display: -ms-flexbox;
     5   display: -webkit-flex;
     6   display: flex;
     7   -webkit-box-align: center;
     8      -moz-box-align: center;
     9      -ms-flex-align: center;
    10   -webkit-align-items: center;
    11           align-items: center;
    12   -webkit-box-pack: center;
    13      -moz-box-pack: center;
    14      -ms-flex-pack: center;
    15   -webkit-justify-content: center;
    16           justify-content: center;
    17 }
  • 相关阅读:
    计算机基础知识
    第三次作业函数
    c博客作业01顺序、分支结构
    C语言第02次作业循环结构
    c语言第0次作业
    JAVA在Eclipse里能运行,但是在cmd中却提示找不到主函数的错误【环境变量配置】
    MFC自定义消息机制步骤
    关于VC6.0界面MFC设置成XP风格问题【可以变得更加好看】
    VC6 下学习使用Teechart8记录 一 安装和熟悉teechart8【一个非常好的画图插件】
    Matlab中,让程序自动处理类似A1,A2,A3变量的方法。
  • 原文地址:https://www.cnblogs.com/webqiand/p/4360126.html
Copyright © 2020-2023  润新知