《网页布局基础篇》HTML+CSS单列布局--水平居中,垂直居中,水平垂直居中
https://blog.csdn.net/panlu666_pl/article/details/66480433
一、水平居中
子元素在父元素中水平居中
1.使用 text-align和inline-block 实现
.parent{
text-align:center;
}
.child{
display:inline-block;
}
2.使用margin:0 auto来实现
.child{
width:720px; /*某具体值或百分比*/
margin:0 auto; /*左右边距必须为auto*/
}
3.使用table实现
.child{
display:table;
margin:0 auto;
}
缺点:IE6,7需要调整结构
4.使用绝对定位实现
.parent{
position:relative;
}
.child{
position:absolute;
left:50%;
transform:translate(-50%);
}
缺点:兼容性差,IE9及以上可用
5.使用flex布局实现
1).
.parent{
display:flex;
justify-content:center;
}
2).
.parent{
display:flex;
}
.child{
margin:0 auto;
}
缺点:兼容性差,如果进行大面积的布局可能会影响效率
二、垂直居中
1.使用vertical-align实现
1).
.parent{
display:table-cell;
vertical-align:middle;
height:200px;
}
2).
.parent{
line-height: 200px;
}
.child{
display:inline-block;
vertical-align:middle;
}
- 元素属于inline或inline-block或table-cell,vertical-align才会起作用
- 在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell
2.使用绝对定位实现
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translate(0,-50%);
}
3.使用flex实现
.parent{
display:flex;
align-items:center;
}
三、水平垂直全部居中
1.利用vertical-align,text-align,inline-block实现
.parent{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.child{
display:inline-block;
}
2.使用绝对定位实现
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3.使用flex实现
.parent{
display:flex;
justify-content:center;
align-items:center;
}
《网页布局基础篇》HTML+CSS单列布局--水平居中,垂直居中,水平垂直居中的更多相关文章
- CSS(3)多种方法实现水平垂直居中效果
CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
- css 文字和子元素水平垂直居中
关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...
- CSS3/CSS之居中解析(水平+垂直居中、水平居中,垂直居中)
首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...
- CSS中怎么设置元素水平垂直居中?
记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...
- CSS多种方式实现元素水平垂直居中
html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...
- 《网页布局基础篇》—浮动布局和float属性
浮动布局 <html> <head> <meta charset="utf-8"> <title>浮动</title> ...
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
随机推荐
- 使用JavaScript输出带有边框的乘法表
在学习JavaScript(以下简称为js)过程中,会遇到输出9*9乘法表的问题,我们都知道利用双重for循环可以很简单的在网页中打印出来,可是你在做的过程中有没有想着给这个乘法表加一点花样呢? 下面 ...
- synchronized 优化手段之锁膨胀机制!
synchronized 在 JDK 1.5 之前性能是比较低的,在那时我们通常会选择使用 Lock 来替代 synchronized.然而这个情况在 JDK 1.6 时就发生了改变,JDK 1.6 ...
- 开机时自动启动的AutoHotkey脚本
;;; 开机时自动启动的AutoHotkey脚本;; 此脚本修改时间 2019年06月18日20时48分;; 计时器创建代码段 ------------------------------------ ...
- SQL根据两个日期生成年、月、日
1 DECLARE @beginTime DATETIME, @endTime DATETIME 2 SET @beginTime ='2019-03-01' 3 SET @endTime ='201 ...
- requests 上件中文文件名报错解决方案
这几天在用wxpy写机器人,在调用里面的上传文件接口的时候,一直报错.经过排查后,发现是不支持中文文件名:在群里问了下作者后才知道是requests惹的祸,默认requests用的是unicode来处 ...
- Vue+SpringBoot前后端分离中的跨域问题
在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...
- OpenCV 之 特征匹配
OpenCV 中有两种特征匹配方法:暴力匹配 (Brute force matching) 和 最近邻匹配 (Nearest Neighbors matching) 它们都继承自 Descriptor ...
- 树莓派SG90舵机接法
我的舵机的三条线是红的.黑色.棕色,接法如下: 棕 : GND 红 : VCC 黄: 信号线 如图所示: 图片来源 如上图所示,写代码时注意舵机的BCM编码是18,而不是物理引脚的编码12.
- 关于:org.apache.catalina.connector.ClientAbortException及getOutputStream() has already been called for this response的异常处理
1.异常场景: 在进行将数据用word导出或者Excel导出的时候.抛出的异常getOutputStream() has already been called for this response 导 ...
- 解决vscode+python不提示numpy函数的问题
前言 使用vscode编写numpy代码时,对于numpy.array()等方法总是无法提示.查找了很多博客后,大部分都是修改配置和安装多种vscode插件,经过尝试后方法对于我来说无效.最后在调试p ...