主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局
- 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 布局(水平居中、垂直居中、居中 )的更多相关文章
- CSS布局，div居中，文字居中
.main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...
- CSS布局之--各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
- CSS布局技巧 -- 各种居中
多行垂直居中 废话少说,直接上例子!!! display:table Html代码: <div class="wrapper"> <div class=" ...
- day07——css布局解决方案之居中布局
转行学开发,代码100天——2018-03-23 1.水平居中 使用inline-block + text-align方法 先将子框由块级元素改为行内块元素,再通过设置行内块元素居中以实现水平居中 ...
- css布局--水平居中
一.水平居中 1. 使用text-align和display:inline-block实现水平居中 html <div class="parent"> <div ...
- css布局--水平垂直居中
1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中 html <div class="parent"> &l ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- 典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Def ...
- HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
随机推荐
- maven手动添加jar包到pom仓库
此处以顺丰jar包为例: mvn install:install-file -Dfile=D:\TSBrowserDownloads\SF-CSIM-EXPRESS-SDK-V1.-\SF-CSIM- ...
- uC/OS-III 时钟节拍（一）
时钟节拍就是操作系统的时基,操作系统要实现时间上的管理,必须依赖于时基(时基即时间基准,操作系统的基准时钟). uC/OS-III时钟节拍的实现过程 时钟节拍就是系统以固定的频率产生中断(时基中断), ...
- Centos6 日常使用小结
网络配置目录 1./etc/sysconfig/network-script/ifcfg-eth0 2.netstat -rn Kernel IP routing table Destination ...
- Vim 使用 DrawIt 画图
简介 DrawIt 插件用来在 Vim 中进行简单的画图功能.可以方便地移动光标并画出横线.竖线.斜线.箭头和交叉字符,也带有实用的画图功能,轻松画带箭头的线.矩形及椭圆. 官方主页:https:// ...
- 电信资源管理系统:基于 H5 叠加 OpenLayers3 GIS
前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用,形成的效果可以用来作为电信资源管理系统,美食定位分享软件,片区找房,绘制铁轨线路等等,各个领域都能 ...
- Activity初学乍练
1.Activity的概念与Activity的生命周期图: 注意事项: onPause()和onStop()被调用的前提是: 打开了一个新的Activity!而前者是旧Activity还可见的状态:后 ...
- mobaxterm使用手册
Mobaxterm V14使用手册 文章出处 https://blog.51cto.com/937761/2372598 简介 MobaXterm 一款Windows系统下全功能终端软件.以下将 ...
- 像艺术家一样思考 Think Like an Artist
艺术家是如何获得灵感,如何找到自己的独特风格和主题的? 艺术家在绘画.写作.表演或歌唱前不会去征求谁的允许,而是随心而行 要想在数字时代获得满足感,我们需要变得有创造性 1.艺术家富有事业心 艺术家是 ...
- django数据库迁移时候异常
django数据库迁移时候异常 一.错误信息 Django在根据models生成数据库表时报 init() missing 1 required positional argument: 'on_de ...
- JVM参数的配置及意义
JVM参数设置.分析 因为在工作中遇到了JVM参数的配置,不明白,网上搜索发现一篇好文,转载至:https://www.cnblogs.com/redcreen/archive/2011/05/04/ ...