zoukankan      html  css  js  c++  java
  • 常用CSS居中

    1.flex方法:

    .center_fix
    { 
    display:flex; 
    align-items:center;
    justify-content: center;
    }

    具体flex方法教程:可以参见软老师的——》Flex 布局教程:实例篇

    2.position:absolute

    .center
    {
    
    position: absolute;
    
    top:50%; left:50%;
    
     100px;
    
    height:100px;
    
    margin-top: -50px;
    
    margin-left:-50px;
    
    background: teal;
    
    }

    3.position: fixed;和上一个absolute方法差不多

    .center{
    position: absolute;
    top:50%;
    left:50%;
     100px;
    height:100px;
    margin-top: -50px;
    margin-left:-50px;
    background: teal;
    } 

    4.

    .center{
    position: fixed;
     100px;
    height: 100px;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background: teal; 
    }


    5.

    .center{
    position: absolute;
     100px;
    height: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: teal;
    }  

    6.CSS3盒模型display:-webkit-box

    .center{
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    100px;
    height:100px;
    background:teal;
    color:black;
    } 


  • 相关阅读:
    网页CSS2
    C#(1)—类型、常量及变量
    进制转化
    12月26日提纲
    12月24日笔记
    12月23日笔记
    12月22日笔记
    12月21日笔记
    12月20日笔记
    break、continue与数组
  • 原文地址:https://www.cnblogs.com/moustache/p/5488207.html
Copyright © 2011-2022 走看看