zoukankan      html  css  js  c++  java
  • 元素居中布局

    水平居中和垂直居中

    水平居中方法1(margin:0 auto):

     垂直居中方法1(table-cell + vertical-align:middle):

    (以下因为在编辑器上截图显示不全,故只上代码) 

    水平居中方法2(绝对定位):

    <div style=" 300px ; height:300px; background-color: red; position: relative">
      <div style=" 100px;height:100px;background-color: yellow ;position: absolute; left:50%;margin-left: -50px"></div>
    </div>

    同理对应垂直居中方法2:

    <div style=" 300px ; height:300px; background-color: red; position: relative">
      <div style=" 100px;height:100px;background-color: yellow ;position: absolute; top:50%;margin-top: -50px"></div>
    </div>

    水平居中方法3(子div浮动+相对定位):

    <div style=" 300px ; height:300px; background-color: red ;">
      <div style="float:left;margin-left:50%; position:relative; left:-50px; 100px;height:100px;background-color: yellow ; "></div>
    </div>

    同理对应垂直居中方法3:

    <div style=" 300px ; height:300px; background-color: red ;">
      <div style="float:left;margin-top:50%; position:relative; top:-50px; 100px;height:100px;background-color: yellow ; "></div>
    </div>

    水平居中方法4(flex):

    <div style="display:flex; justify-content:center ; 300px ; height:300px; background-color: red ;">
      <div style=" 100px;height:100px;background-color: yellow ; "> </div>
    </div>

    同理垂直居中方法4:

    <div style="display:flex; align-items:center; 300px ; height:300px; background-color: red ;">
      <div style=" 100px;height:100px;background-color: yellow ; "> </div>
    </div>

     

  • 相关阅读:
    diamond operator is not supported in -source 1.5
    ClassNotFoundException异常的解决方法
    serialVersionUID 的用途--转加自己的疑问
    java序列化---转
    junit类找不到的问题解决
    FastJson的基本用法----转
    sql字符串查找大小写敏感相关
    6.比较排序之快速排序
    有关ArrayList常用方法的源码解析
    5.比较排序之归并排序(非递归)
  • 原文地址:https://www.cnblogs.com/btsn/p/11610436.html
Copyright © 2011-2022 走看看