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. L1-046. 整除光棍(模拟除法)

    题意: 这里所谓的“光棍”,并不是指单身汪啦~ 说的是全部由1组成的数字,比如1.11.111.1111等.传说任何一个光棍都能被一个不以5结尾的奇数整除.比如,111111就可以被13整除. 现在, ...

  2. lvs负载均衡配置

    三台server的ip     direct_server:192.168.248.128     real_server1:192.168.248.130     real_server2:192. ...

  3. 浅谈Spring 5的响应式编程

    这篇使用Spring 5进行响应式编程的入门文章展示了你现在可以使用的一些新的non-blocking, asynchronous.感谢优锐课老师给予的指导! 近年来,由于响应式编程能够以声明性的方式 ...

  4. 039、Java中逻辑运算之普通与运算“&”

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

  5. url中?的作用

    http://123.206.87.240:8002/get/?what=flag? 分隔实际的URL和参数 ,用于动态页面的交互和传参

  6. (五)微信小程序的跳转

    我们在微信页面往往有点击一个图片就可以跳转的情况,接下来我们就学习一下这个功能 一  js版本--bindtap 实现跳转 1. 首先我们先写一个跳转的按钮(在index.wxml) <view ...

  7. 使用Ubuntu系统管理包工具(apt)部署Zabbix企业级监控系统

    使用Ubuntu系统管理包工具(apt)部署Zabbix企业级监控系统  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Ubuntu系统部署笔记:https://www.cnblo ...

  8. 107-PHP类成员属性赋值

    <?php class mao{ //定义猫类 public $age; //定义多个成员属性 protected $weight; private $color; } $mao1=new ma ...

  9. Python 比较 相等性 真值

    1 == 操作符测试 值 的相等性: is 测试对象的一致性.注意短字符串的is相等性测试,PVM会缓存短字符串,s1 is s2 将返回true. 2 false:"", [], ...

  10. HDU 4902 Nice boat 多校4 线段树

    给定n个数 第一个操作和普通,区间覆盖性的,把l-r区间的所有值改成固定的val 第二个操作是重点,输入l r x 把l-r区间的所有大于x的数,变成gcd(a[i],x) a[i]即指满足条件的序列 ...