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

    一、position元素

    第一种:通过 position + translateY

     a:水平及垂直同时居中

     1 .wrapper {
     2     position: relative;
     3     width: 300px;
     4     height: 300px;
     5     border: solid 2px red;
     6     border-radius: 5px;
     7 }
     8 
     9 .wrapper .content{
    10     position: absolute;
    11     top: 50%;
    12     left: 50%;
    13     transform: translateX(-50%) translateY(-50%);
    14     height: 100px;
    15     width: 100px;
    16     border: solid 2px blue;
    17     border-radius: 5px;
    18 }

     b:水平居中

     1 .wrapper {
     2     position: relative;
     3     width: 300px;
     4     height: 300px;
     5     border: solid 2px red;
     6     border-radius: 5px;
     7 }
     8 
     9 .wrapper .content{
    10     position: absolute;
    11     left: 50%;
    12     transform: translateX(-50%);
    13     height: 100px;
    14     width: 100px;
    15     border: solid 2px blue;
    16     border-radius: 5px;
    17 }

    c:垂直居中

     1 .wrapper {
     2     position: relative;
     3     width: 300px;
     4     height: 300px;
     5     border: solid 2px red;
     6     border-radius: 5px;
     7 }
     8 
     9 .wrapper .content{
    10     position: absolute;
    11     top: 50%;
    12     transform: translateY(-50%);
    13     height: 100px;
    14     width: 100px;
    15     border: solid 2px blue;
    16     border-radius: 5px;
    17 }

     第二种:通过 position + margin

    a:水平及垂直同时居中

     1 .wrapper {
     2     position: relative;
     3     width: 300px;
     4     height: 300px;
     5     border: solid 2px red;
     6     border-radius: 5px;
     7 }
     8 
     9 .wrapper .content{
    10     position: absolute;
    11     top: 50%;
    12     margin-top: -50px;
    13     left: 50%;
    14     margin-left: -50px;
    15     height: 100px;
    16     width: 100px;
    17     border: solid 2px blue;
    18     border-radius: 5px;
    19 }

     b:水平居中 

     1 .wrapper {
     2     position: relative;
     3     width: 300px;
     4     height: 300px;
     5     border: solid 2px red;
     6     border-radius: 5px;
     7 }
     8 
     9 .wrapper .content{
    10     position: absolute;
    11     left: 50%;
    12 margin-left: -50px; 13 height: 100px; 14 width: 100px; 15 border: solid 2px blue; 16 border-radius: 5px; 17 }

    c:垂直居中

     1 .wrapper {
     2     position: relative;
     3     width: 300px;
     4     height: 300px;
     5     border: solid 2px red;
     6     border-radius: 5px;
     7 }
     8 
     9 .wrapper .content{
    10     position: absolute;
    11     top: 50%;
    12     margin-top: -50px;
    13     height: 100px;
    14     width: 100px;
    15     border: solid 2px blue;
    16     border-radius: 5px;
    17 }

    二、元素内部信息

    第一种:元素内容没有标签,只有内容,这样垂直设置height和line-height一样就可以了,水平设置text-align:center就可以

    1  .wrapper{
    2     height: 50px;
    3     line-height: 50px;
    4     text-align: center;     
    5  }

    第二种:元素内部元素居中,设置如下:

    .wrapper-table{
        display: table-cell;
        height: 100px;
        width: 100px;
        vertical-align: middle;
        text-align: center;
        border: solid 2px yellow;
    }
    
    .wrapper-table .wrapper-table-cell{
        border: solid 2px #009900;
    }
     
  • 相关阅读:
    AutomaticallyProfile 自动化引擎 MyBatis和DB沟通的引擎 (根据数据库信息自动给生成实体类那些...)
    经典aop,
    IOC和DI区别,aop的第一个案例,注入方式(7种),aop的7个专业术语,注解的DI,代理(动态代理,静态代理)
    AOP(AOP概念,AOP专业术语,单例模式,bean的id和name属性,基于xml的DI, 构造注入,命名空间p注入,集合属性注入, List 配置文件)
    ajax
    spring基础
    一对多,多对一,自关联,多对多,一级缓存,二级缓存
    hql语法
    sql操作语言
    Oracle函数
  • 原文地址:https://www.cnblogs.com/zbspace/p/8379774.html
Copyright © 2011-2022 走看看