什么是布局

  • html 页面的整体结构或骨架
  • 布局不是某个技术内容 而是一种设计思想

[ 布局方式 ]

  • 水平居中布局
  • 垂直居中布局
  • 居中布局( 水平 + 垂直 )

什么是水平居中布局

水平居中布局 元素相对于页面/元素相对于父元素水平居中

[ 实现方式 ]

  • inline-block + text-align 属性配合使用

注:[优点] 浏览器兼容性比较好 [缺点] text-align 属性具有继承性 导致子级元素的文本居中显示

**解决方法:在子级元素重新设置 text-align 属性覆盖掉父级元素的 text-align 属性 **

<style>
*{
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 200px;
background-color: #00ffff;
/* 方法一: inline-block + text-align 属性配合使用 为父元素 添加 text-align 属性 为子元素添加 display 属性
- text-align 属性 为文本内容设置对其方式
+ left: 左对齐
+ center: 居中对齐
+ right: 右对齐
*/
text-align: center;
}
.child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* display 属性:
- block: 块级元素
- inline: 内联元素 (text-align 有效)
+ width 和 height 属性无效
- inline-block: 行内块元素 (块级 + 内联 )
*/
display: inline-block;
}
</style>
<body>
<!-- 居中布局 -->
<!-- 方法一: inline-block + text-align 属性配合使用 --> <div class="parent">
<div class="child"></div>
</div>
</body>
  • table + margin 属性配合使用

    注:[优点] 只需要对子级元素进行设置就可以实现水平居中 [缺点] 如果子级元素脱离文档流,导致 margin 属性失效

    解决方法:考虑第一种或第三种解决方案

[ 拓展 ] CSS 中使元素脱离文档流的方式

  • 将元素设置浮动 float
  • 将元素设置为绝对定位 position: absolute
  • 将元素设置为固定定位 position: fixed
  <style>
*{
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 200px;
background-color: #00ffff;
}
.child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* 方法二: gtable + margin 属性配合使用 */
/* display的值 为 table 或 block */
display: table;
/* margin 属性: 外边距
- 一个值: 上下左右
- 两个值: 上下,左右
+ auto 根据浏览器自动分配
- 三个值: 上,左右,下
- 四个值: 上,右,下,左
*/
margin: 0 auto;
}
</style>
  • absolute + transform 属性配合使用

注:[优点] 无论父级元素是否脱离文档流,不影响子级元素水平居中的效果 [缺点] transform 属性是 CSS 3 中新增的属性 浏览器支持情况不好

**解决方法:考虑第一种或第二种解决方案 **

<style>
* {
margin: 0;
padding: 0;
} .parent {
width: 100%;
height: 200px;
background-color: #00ffff;
/* 相对定位 */
position: relative;
} .child {
width: 300px;
height: 200px;
background-color: #ff0000;
/* 当把当前元素设置为绝对定位以后
- 如果父级元素没有设置定位,当前元素是相对于页面定位的
- 如果父级元素设置了定位,当前元素是相对于父级元素定位的
*/
position: absolute;
left: 50%;
/* 水平方向平移 */
transform: translateX(-50%);
/* margin-left: -50%; */
}
</style>
  • ... ...

什么是垂直居中布局

垂直居中布局 :当前元素相对于页面/父元素垂直方向是居中显示的

[ 实现方式 ]

  • table-cell + vertical-align 属性配合使用

    注:[优点] 浏览器的兼容性比较好 [缺点] vertical-align 属性 具有继承性 导致子级元素的文本居中显示

    **如果父级元素中包含除子级元素以外的文本内容,此方法不适用 **
  <style>
* {
margin: 0;
padding: 0;
}
.parent {
/*方法一: table-cell + vertical-align 属性配合使用 */
width: 200px;
height: 600px;
background-color: #00ffff;
/* display 属性:
- table: 设置当前元素为<table>元素
- table-cell:设置当前元素为<td>元素 单元格
- 设置完成以后 作为子级元素的div就相当于单元格中的内容了,设置对齐方式即可 */
display: table-cell;
/*
vertical-align 属性: 用于设置文本内容的垂直方向的定对齐方式
- top: 顶部对齐
- middle: 居中对齐
- bottom: 底部对齐
*/
vertical-align: middle;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000; } </style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
  • absolute + transform 属性配合使用

    注:[优点] 无论父级元素是否脱离文档流,不影响子级元素的垂直居中的效果 [缺点] transform 属性是 CSS 3 中新增的属性 浏览器支持情况不好

    **解决方法:考虑第一种解决方案 **
    <style>

    * {
margin: 0;
padding: 0;
}
.parent {
width: 200px;
height: 600px;
background-color: #00ffff; position:relative;
}
/* 方法二: absolute + transform 属性配合使用 */
.child {
width: 200px;
height: 300px;
background-color: #ff0000; position: absolute;
top: 50%;
/* 垂直方向 */
transform: translateY(-50%);
}
</style>

什么是居中布局

居中布局:( 水平 + 垂直 )居中

[ 实现方式 ]

  • display:block + margin 属性实现水平方向居中,table-cell + vertical-align 属性实现垂直方向居中

    注:[优点] 浏览器兼容性比较好 [缺点] 父元素与子元素都需要增加代码
   <style>
* {
margin: 0;
padding: 0;
}
.parent { width: 1000px;
height: 600px;
background-color: #00ffff;
/* 实现垂直居中 */
/* <td> */
display: table-cell;
vertical-align: middle; } .child {
width: 200px;
height: 300px;
background-color: #ff0000;
/* 实现水居中 */
/* <table> */
/* display: table; */
display: block;
margin: 0 auto; } </style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
  • absolute + transform 属性实现水平和垂直方向的居中

    注:[优点] 无论父级元素是否脱离文档流,不影响子级元素的垂直居中的效果,不考虑浏览器兼容性,优于第一中方案 [缺点] transform 属性是 CSS 3 中新增的属性 浏览器支持情况不好同时子父元素都增加了代码
<style>

    * {
margin: 0;
padding: 0;
}
.parent {
width: 1000px;
height: 600px;
background-color: #00ffff;
/* 相对定位 不脱离文档流*/
position:relative;
}
.child {
width: 200px;
height: 300px;
background-color: #ff0000;
/* 绝对定位 ———— 子绝父相 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* transform: translateX(-50%);
transform: translateY(-50%); */
}
</style>

主流 CSS 布局(水平居中、垂直居中、居中 )的更多相关文章

  1. CSS布局,div居中,文字居中

    .main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...

  2. CSS布局之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  3. CSS布局技巧 -- 各种居中

    多行垂直居中 废话少说,直接上例子!!! display:table Html代码: <div class="wrapper"> <div class=" ...

  4. day07——css布局解决方案之居中布局

     转行学开发,代码100天——2018-03-23 1.水平居中 使用inline-block + text-align方法 先将子框由块级元素改为行内块元素,再通过设置行内块元素居中以实现水平居中 ...

  5. css布局--水平居中

    一.水平居中 1. 使用text-align和display:inline-block实现水平居中 html <div class="parent"> <div ...

  6. css布局--水平垂直居中

    1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中 html <div class="parent"> &l ...

  7. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  8. 典型的DIV+CSS布局——左中右版式

    [效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Def ...

  9. HTML+CSS,让div在屏幕中居中(水平居中+垂直居中)方法总结

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...

随机推荐

  1. LoadRunner11.安装破解

    Loadrunner安装及破解   一. 安装 1. 将ISO文件导入,打开光驱,运行“setup.exe” 2. 点击安装,部分机器会提示缺少“Microsoft Visual C++ 2005 S ...

  2. JS中如何防止表单重复提交问题

    在登录页面html中写如下代码 <script type="text/javascript"> var issubmit=false; function dosubmi ...

  3. 玩转 SpringBoot 2 快速整合拦截器

    概述 首先声明一下,这里所说的拦截器是 SpringMVC 的拦截器 HandlerInterceptor.使用SpringMVC 拦截器需要做如下操作: 创建拦截器类需要实现 HandlerInte ...

  4. Angular6 CodeMirror在线编辑sql 智能提示

    1. 安装ng2-codemirror包.codemirror包 npm install ng2-codemirror -- save npm install codemirror -- save 2 ...

  5. Dart数据类型

    变量与常量: 变量: 使用var声明变量,可以赋予不同数据类型的值, 未初始化时默认值是null 使用final声明的变量只能被赋值一次 void main(){ var a; print(a); a ...

  6. 关于SpringBoot 1.x和2.x版本差别

    有点小差别 基本上基于SpringBoot的代码不需要改动,但有些配置属性和配置类,可能要改动,改动原因是 配置和类的更新或者是改名一般正常的MVC,数据库访问这些都不需要改动,下面按照本书章节说明区 ...

  7. GAN算法笔记

    本篇文章为Goodfellow提出的GAN算法的开山之作"Generative Adversarial Nets"的学习笔记,若有错误,欢迎留言或私信指正. 1. Introduc ...

  8. .net Core 发布服务

    .net core 发布服务 准备好的文件可以通过下面的几个命令进行操作 1.创建Service sc create "服务名" binPath= "文件路径+文件名&q ...

  9. 洛谷 1552 [APIO2012]派遣

    题目背景 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿. 题目描述 在这个帮派里,有一名忍者被称之为Master.除了Master以外,每名忍者都有且仅有一个上级.为保密 ...

  10. 【NOIP2011】选择客栈

    题文: 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从1 到n 编号.每家客栈都按照某一种色调进行装饰(总共k 种,用整数0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖啡店均有各自的 ...