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. 【剑指Offer】面试题34. 二叉树中和为某一值的路径

    题目 输入一棵二叉树和一个整数,打印出二叉树中节点值的和为输入整数的所有路径.从树的根节点开始往下一直到叶节点所经过的节点形成一条路径. 示例: 给定如下二叉树,以及目标和 sum = 22, 5 / ...

  2. Docker基本使用运行ngix镜像

    docker pull 项目名 会从docker默认的仓库去拉去项目,如果是docker pull 项目名 地址 会从给定地址拉去镜像 docker run image名字  运行镜像 docker架 ...

  3. oracle 实现主键id自增

    公司现在项目数据库使用oracle,oracle实现表主键自增比mysql麻烦 mysql 在表主键auto_increment 打钩即可.oracle没有改属性,就相对麻烦.特此记录一下自增方法 测 ...

  4. 0203 生成mysql的数据库的数据字典

    原理 项目的数据库字典表是一个很重要的文档.通过此文档可以清晰的了解数据表结构及开发者的设计意图. 通常为了方便我都是直接在数据库中建表,然后通过工具导出数据字典. 在Mysql数据库中有一个info ...

  5. 057、Java中break的用法

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  6. WC2020 联训 #19 矩阵

    好不容易自己切一道题 链接 Description 在一个 \(n×(n+1)\) 的棋盘上放棋子, \(n\) 行中每行都恰好有两枚棋子,并且 \(n+1\) 列中每列都至多有两枚棋子,设 \(n= ...

  7. P 1008 说反话

    转跳点:

  8. 小程序之scroll-view用法 - 水平滚动

    <scroll-view class="box" scroll-x="true" > <view class="box-item&q ...

  9. PyPI提供双因素身份验证(2FA),已提高下载安全性

    前天,Python的核心开发团队宣布PyPI现在提供双因素身份验证(2FA),以提高Python包下载的安全性,从而降低未经授权的帐户访问的风险.该团队宣布将在Python Package Index ...

  10. ubuntu下pip的安装、升级和使用

    系统虽然自带了不同版本的python,但都没有安装pip,pyhton2.7下使用的是pip2,python3.5下使用的是pip3.下面是各自安装命令. 安装 pip2: sudo apt-get ...