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. Element 以二进制的形式 自定义上传图片

    一,只有在上传文件之前的钩子函数中才可以获得最初的文件(文件本身的二进制形式),用以以上传服务器. 还需要使用formdata来承载数据,便于接收 <template>   <div ...

  2. 免杀PHP一句话一枚

    免杀PHP一句话shell,利用随机异或免杀D盾,免杀安全狗护卫神等 <?php class VONE { function HALB() { $rlf = 'B' ^ "\x23&q ...

  3. lucene实践 - 索引维护、多域查询、高亮显示

    之前的博客搜索栏用的是 sql 模糊查询进行查找,最近学完lucene,要学以致用啊,就把sql搜索给替换下来吧 中间遇到一些问题,也是学过程中没有提到的,所以说,还是实践出真知啊. lucene分开 ...

  4. 洛谷P2089 烤鸡

    标签:暴力,枚举 题目背景 猪猪 Hanke 得到了一只鸡. 题目描述 猪猪 Hanke 特别喜欢吃烤鸡(本是同畜牲,相煎何太急!)Hanke 吃鸡很特别,为什么特别呢?因为他有 10 种配料(芥末. ...

  5. mysql 模糊查询中包含特殊字符查询

  6. 编译安装常用包+阿里镜像源-常用资源-系统-下载-科莱软件下载-docker仓库包-安全圈-杏雨梨云-图形界面安装-docker私有双仓库-阿里源报错处理-centos7目录大小

    yum install apr-util apr-util-devel apr apr-devel pcre pcre-devel zlib zlib-devel openssl openssl-de ...

  7. JAVA面试题0 JAVA语言的基本知识

    JAVA语言的特点是什么? >面向对象:两个基本概念:类和对象:三大基本特性:封装.继承.多态: >健壮性:java吸收了C/C++的优点,但是去掉了它们影响健壮性的部分,例如指针和内存申 ...

  8. 在 Delphi 中使用微软全文翻译的小例子

    使用帮助 需要先去申请一个 AppID: http://www.bing.com/toolbox/bingdeveloper/使用帮助在: http://msdn.microsoft.com/en-u ...

  9. 三、深入Vue组件——Vue插槽slot、动态组件

    一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...

  10. ping不通www.baidu.com,但可以访问www.baidu.com网页

    https://blog.csdn.net/stpeace/article/details/45116425 了解网络的人, 基本上都用过ping命令, 这个优秀的小工具通常能非常靠谱地检测网络的连通 ...