position(transform css3  有些浏览器不兼容)

<article id="one">
<section id="section"></section>
</article> <style>
#one {
position: relative; //此处不设置的话 会一直往上找 找到body
width: 300px;
height: 300px;
background: lightskyblue;
}
#section {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background: aliceblue;
transform: translate(-50%, -50%);
}
</style>

2.margin-top(需要知道具体尺寸计算)

<article id="one">
<section id="section"></section>
</article> <style>
#one {
position: relative;
width: 300px;
height: 300px;
background: lightskyblue;
}
#section {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px; // 需要通过 计算 但是兼容性好
margin-top: -50px;
background: aliceblue;
}
</style>

3.flex(简单,兼容问题)

<article id="one">
<section id="section"></section>
</article> <style>
#one {
display: flex;
width: 300px;
height: 300px;
background: lightskyblue;
justify-content: center;
align-items: center;
}
#section {
width: 100px;
height: 100px;
background: aliceblue;
}
</style>

4.gred

<article id="one">
<section id="section"></section>
</article> <style>
#one {
display: grid; //和flex就一点不同 ????
width: 300px;
height: 300px;
background: lightskyblue;
justify-content: center;
align-items: center;
}
#section {
width: 100px;
height: 100px;
background: aliceblue;
}
</style>

css 居中布局方案的更多相关文章

  1. CSS居中布局方案

    基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. CSS居中布局总结【转】

    居中布局 <div class="parent"> <div class="child">demo</div> </d ...

  3. CSS居中布局总结

    居中布局 <div class="parent"> <div class="child">demo</div> </d ...

  4. 详解 CSS 居中布局技巧

    水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; ...

  5. 详解CSS居中布局技巧

    本文转自:https://zhuanlan.zhihu.com/p/25068655#showWechatShareTip一.水平居中元素: 1.通用方法,元素的宽高未知方式一:CSS3 transf ...

  6. CSS 居中布局

    来源:http://www.cnblogs.com/QianBoy/p/8539077.html 水平居中 1)使用inline-block+text-align 原理:先将子框由块级元素改变为行内块 ...

  7. CSS居中布局

    一:水平居中方案: 1.行内元素 设置 text-align:center 2.定宽块状元素 设置 左右 margin 值为 auto 3.不定宽块状元素 a:在元素外加入 table 标签(完整的, ...

  8. css居中布局的几种方式

    一.水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置widt ...

  9. 【基础】这15种CSS居中的方式,你都用过哪几种?

    简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...

随机推荐

  1. Java中数组的创建

    Java中数组的使用 1.普通数组变量的定义: //数组 //1.数组是Java中很重要的一部分,今天对数组进行了大致的了解,Java中的数组和C中数组还是有一定的区别的 //以下是总结的几种方法 p ...

  2. 015.Oracle数据库,取本月月初,取本月月末

    /*取本月月初,取本月月末*/ SELECT trunc( SYSDATE, 'mm' ) AS 月初 , last_day(trunc(sysdate)) AS 月末 FROM dual; 修改如下 ...

  3. 初学Java(1)

    1.Java基本数据类型: 2.Java的main方法: 被static修饰,类名与文件名相同:void:方法的返回值,无返回值:main方法是程序的入口,有且只有一个: String[] args: ...

  4. jenkins + gitlab 快速搭建(docker-compose) 时间,时区 同步

    记录一下吧   算打一下 tag   最近在整得 swarm + jenkins 实现自动化部署 回滚 #构建jenkins 镜像 #dockerfile:      docker build -t  ...

  5. 在windows7 64位上安装selenium2library问题解决

    今天发现了windows7 64位上安装selenium2Libaray的问题,下载exe文件安装不行.就切换成了半自动模式.  方案如下: 1.首先下载pip安装.(因为要用pip来安装 selen ...

  6. 每天一点点之vue框架学习 - uni-app 修改上一页参数

    方法一:使用微信提供的 getCurrentPages() 来实现 // 更新上一级的数据 getPrevData(){ var pages = getCurrentPages(); var curr ...

  7. docker 后台运行和进入后台运行的容器

    先创建并进入一个新的被命名为newos的新容器    docker run -it --name newos docker.io/centos #创建并指定端口号映射 docker run -d -p ...

  8. C# ------ MEF

    参考 参考 MEF全称Managed Extensibility Framework, 是一个用于创建可扩展的轻型应用程序的库.开发人员可以利用MEF发现并使用扩展,但并不需要配置,而且还可以在应用程 ...

  9. XML 之 语法详解

    一.文档规则 .区分大小写. .属性值必须加引号(单引号.双引号都可以),一般情况下建议使用使用双引号. .所有标记必须有结束符号. .所有空标记必须关闭. .必须有且仅有一根元素. .解析空白字符时 ...

  10. MySQL5.7忘记密码解决方案

    第一种方法 首先是网上普遍见到的 关闭服务 windows下在C:\ProgramData(隐藏文件夹)\MySQL\MySQL Server 5.7\my.ini中的[mysqld]下添加skip- ...