居中布局

水平居中

1)使用inline-block+text-align

原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。

用法:对子框设置display:inline-block,对父框设置text-align:center。

<div class="parent">
<div class="child">DEMO</div>
</div>
.child{
display: inline-block;
}
.parent{
text-align: center;
}

缺点:child里的文字也会水平居中,可以在.child添加text-align:left;还原

2)使用absolute+transform

<div class="parent">
<div class="child">DEMO</div>
</div>
.child{
position: relative;
}
.parent{
position: absolute;
left: 50%;
transform: translateX(-50%);
}

3)使用flex+justify-content

原理:通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

用法:先将父框设置为display:flex,再设置justify-content:center。

<div class="parent">
<div class="child">DEMO</div>
</div>
.parent{
display: flex;
justify-content: center;
}

缺点:低版本浏览器(ie6 ie7 ie8)不支持

4)使用flex+margin

原理:通过CSS3中的布局利器flex将子框转换为flex item,再设置子框居中以达到居中。

用法:先将父框设置为display:flex,再设置子框margin:0 auto。

<div class="parent">
<div class="child">DEMO</div>
</div>
.parent{
display: flex;
}
.child{
margin: 0 auto;
}

垂直居中

1)使用absolute+transform

用法:先将父框设置为position:relative,再设置子框position:absolute,top:50%,transform:translateY(-50%)。

.parent {
position:relative;
}
.child {
position:absolute;
top:50%;
transform:translateY(-50%);
}

2)使用flex+align-items

原理:通过设置CSS3中的布局利器flex中的属性align-times,使子框垂直居中。

.parent {
position:flex;
align-items:center;
}

水平垂直居中

1)使用absolute+transform

.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
top:50%;
transform:tranplate(-50%,-50%);
}

2)使用flex+justify-content+align-items

.parent {
display:flex;
justify-content:center;
align-items:center;
}

CSS布局方案的更多相关文章

  1. CSS布局方案之圣杯布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. CSS 布局经典问题初步整理

    CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...

  3. css布局基础总结

    前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...

  4. CSS居中布局方案

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

  5. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  6. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  7. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  8. 移动适配请使用比rem等更好的布局方案

      移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配.   屏幕适配顾名思义 ...

  9. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

随机推荐

  1. opencv-python与c++ opencv中的一些区别和基础的知识

    使用opencv-python一段时间了,因为之前没有大量接触过c++下的opencv,在网上看c++的一些程序想改成python遇到了不少坑,正好在这里总结一下. 1.opencv 中x,y,hei ...

  2. 浅谈JavaScript的事件(事件模拟)

    事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件.通过JavaScript触发事件,也称为事件的模拟. DOM中事件模拟 可以document的createEvent ...

  3. 聊聊Vue.js的template编译

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  4. 【Unity3D技术文档翻译】第1.1篇 AssetBundle 工作流

    译者前言:本章是关于从创建到加载,再到使用 AssetBundle 的整个流程的概述.阅读本章将对 AssetBundle 的工作流程有个简单而全面的了解. 本章原文所在章节:[Unity Manua ...

  5. python并发编程之多进程(一):进程开启方式&多进程

    一,进程的开启方式 利用模块开启进程 from multiprocessing import Process import time,random import os def piao(name): ...

  6. vue.js 安装过程(转载)

      一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核 ...

  7. 阿里云CentOS 7系统挂载SSD云盘的教程_Linux

    一.查看SSD云盘 sudo fdisk -l Disk /dev/vda: 42.9 GB, 42949672960 bytes, 83886080 sectors Units = sectors ...

  8. HZAU 1199: Little Red Riding Hood 01背包

    题目链接:1199: Little Red Riding Hood 思路:dp(i)表示前i朵花能取得的最大价值,每一朵花有两种选择,摘与不摘,摘了第i朵花后第i-k到i+k的花全部枯萎,那么摘的话d ...

  9. poj 3278 简单BFS

    题意:给定农夫和奶牛的初始位置,农夫可以当前位置+1.-1.*2三种移动方式,问最少需要多少分钟抓住奶牛 AC代码: #include<cstdio> #include<cstrin ...

  10. [Note] 计算机网络的应用层

    应用层 原理 结构和模型 客户-服务器体系结构(client-server architecture ) 通信不是直接的,需要通过服务器转发 经常会在服务器积压大量的负载 服务器(server) 服务 ...