目前主流的css布局包含:居中布局、多列布局、全屏布局。

主要样式参考:

<style type="text/css">
html,body,p,h1,h2,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.main ul{
display:flex;
flex-direction: row;
justify-content: space-between;
padding:20px;
}
.main div{
width: 200px;
height: 200px;
text-align: center;
margin-bottom: 10px;
background-color: #faa755;
}
.main div p{
width: 100px;
height: 50px;
background-color: #fedcbd;
}
/*水平居中*/
.center-line-inline{
display:inline-block;
text-align: center;
}
.center-line-inblock{
margin:0 auto;
text-align: center;
}
.center-line-flex{
display:flex;
flex-direction: row;
justify-content: center;
} /*垂直居中*/
.center-row{
display: table-cell;
vertical-align:middle;
}
.center-row-position{
position:relative;
margin-top:10px;
}
.center-row-position p{
position: absolute;
top:50%;
left:0;
margin-top: -25px;
}
.center-row-flex{
display:flex;
align-items: center;
}
/*水平垂直居中*/
.center-all{
display: table-cell;
text-align: center;
vertical-align:middle;
}
.center-all p{
display: inline-block;
}
.center-all-position{
position: relative;
margin-top:10px;
}
.center-all-position p{
position:absolute;
left:50%;
top:50%;
margin-top:-25px;
margin-left:-50px;
}
.center-all-flex{
display:flex;
align-items: center;
justify-content: center;
} /*圣杯布局*/
.main .grail-box{
width: 100%;
height: 600px;
position:relative;
}
.main .grail-box .center{
background:#feeeed;
width: 100%;
height: 600px;
}
.main .grail-box .left{
background:#f391a9;
width: 200px;
height: 600px;
position:absolute;
left:0;
top:0;
}
.main .grail-box .right{
background: #4e72b8;
width: 200px;
height: 600px;
position:absolute;
right:0;
top:0;
} .main .grail-box-fl{
width: 100%;
height: 600px;
overflow: hidden;
}
.main .grail-box-fl .center{
background:#feeeed;
width: calc(100% - 400px);
height: 600px;
float:left;
}
.main .grail-box-fl .left{
background:#f391a9;
width: 200px;
height: 600px;
float:left;
}
.main .grail-box-fl .right{
background: #4e72b8;
width: 200px;
height: 600px;
float: left;
}
</style>

一、居中布局

<ul>
<li>
<h2>水平居中</h2>
<div>
<p class="center-line-inline">水平居中1</p> <!-- 块级元素:text-align:center -->
</div>
<div>
<p class="center-line-inblock">水平居中2</p> <!-- 块级元素:margin:0 auto -->
</div>
<div class="center-line-flex">
<p>水平居中3</p> <!-- 弹性盒模型 justify-content: center;-->
</div>
</li>
<li>
<h2>垂直居中</h2>
<div class="center-row">
<p class="center-row-inline">垂直居中1</p> <!-- vertical-align:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐(大白话就是相对于同一行元素来说),所以使用此属性布局垂直居中,需要设置父级元素属性为表格属性 -->
</div>
<div class="center-row-position">
<p>垂直居中2</p> <!-- 通过定位计算,需要知道子元素的高度 -->
</div>
<div class="center-row-flex">
<p>垂直居中3</p> <!-- 弹性盒模型 align-items: center; -->
</div>
</li>
<li>
<h2>水平垂直居中</h2>
<div class="center-all">
<p>居中1</p> <!-- vertical-align结合align-center-->
</div>
<div class="center-all-position">
<p>居中2</p> <!-- 通过定位计算,需要知道子元素的宽高-->
</div>
<div class="center-all-flex">
<p>居中3</p> <!-- 通过弹性盒模型-->
</div>
</li>
</ul>

二、多列布局(两列/三列布局、圣杯布局)

<h1>多列布局</h1>
<h2>圣杯布局</h2> <!-- (左右固定中间自适应)(中间栏要在浏览器中优先渲染) -->
<div class="grail-box"> <!-- 通过绝对定位 -->
<p class="center">中qqq</p>
<p class="left">左</p>
<p class="right">右</p>
</div>
<div class="grail-box-fl"> <!-- 通过浮动 -->
<p class="left">左</p>
<p class="center">中</p>
<p class="right">右</p>
</div>

收藏:圣杯布局和双飞翼布局的理解与思考

三、全屏布局(等分布局、等高布局、全屏布局)

css中的左右垂直居中的问题,可兼容各种版本浏览器的写法的更多相关文章

  1. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  2. CSS中设置div垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  4. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  5. 在CSS中水平居中和垂直居中:完整的指南

    这篇文章将会按照如下思路展开: 一.水平居中 1. 行内元素水平居中 2. block元素水平居中 3. 多个块级元素水平居中 二.垂直居中 1. 行内元素水平居中 2. block元素水平居中 3. ...

  6. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  7. css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...

  8. CSS中强大的EM

    (转)作者:dearjohn ,发布于2012-7-31 http://www.uml.org.cn/html/201207311.asp 使用CSS也好久了,但一直都是在使用“px”来设置Web元素 ...

  9. css中的em 简单教程 -- 转

    先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...

随机推荐

  1. Unity内存优化

    [Unity内存优化] 1.在Update方法或循环中,少用string类,因为string类的每次操作都会调用new生成新字符串对象.用StringBuilder代替string,StringBui ...

  2. 获取网页上的所有QQ号码,并生成exel报表

    需要的jar如下: package jsoup.zr.com.utils; /** * * @author LF * */ public class Constant { /** * 网站链接地址ַ ...

  3. Python学习笔记_从CSV读取数据写入Excel文件中

    本示例特点: 1.读取CSV,写入Excel 2.读取CSV里具体行.具体列,具体行列的值 一.系统环境 1. OS:Win10 64位英文版 2. Python 3.7 3. 使用第三方库:csv. ...

  4. unary_function和binary_function详解

    1.unary_function和binary_function介绍 1.1 unary_function介绍 unary_function可以作为一个一元函数对象的基类,它只定义了参数和返回值的类型 ...

  5. NPOI读写Excel sheet操作

    QueryInfo dataInfo = new QueryInfo(); dataInfo.CustomSQL = $@" select t1.name name,t1.url url f ...

  6. hdu 2049 不容易系列之(4)——考新郎 (错排递推)

    当n个编号元素放在n个编号位置,元素编号与位置编号各不对应的方法数用M(n)表示,那么M(n-1)就表示n-1个编号元素放在n-1个编号位置,各不对应的方法数,其它类推. 第一步,把第n个元素放在一个 ...

  7. 用Word 写csdn blog

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  8. UML的常用关系及其符号表示

    原创 UML的常用关系及其符号表示 一.实现关系 通常是一个类实现一个接口 符号表示: 二.泛化关系 通常是一个类继承另外一个类 符号表示: 三.依赖关系 通常是一个类里面的方法的参数类型是另一个类 ...

  9. hibernate3的配置

    原创 链接:https://pan.baidu.com/s/1S-x271CT3wBqQodfFI1dZg 密码:ghti hiberdate3的下载链接如上 hibernate3在MyEclipse ...

  10. 基于SSH的记账管理系统设计与实现-JavaWeb项目-有源码

    开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: Java记账管理系统主要用于财务人员可以从账务中判断公司的发展方向.对个人和家庭而言,通过记账可以制定日后的 ...