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