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单列布局--水平居中,垂直居中,水平垂直居中的更多相关文章

  1. CSS(3)多种方法实现水平垂直居中效果

    CSS实现水平垂直居中对齐 在CSS中实现水平居中,会比较简单.常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: cente ...

  2. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  3. 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中

    一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:center ...

  4. css 文字和子元素水平垂直居中

    关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...

  5. CSS3/CSS之居中解析(水平+垂直居中、水平居中,垂直居中)

    首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...

  6. CSS中怎么设置元素水平垂直居中?

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  7. CSS多种方式实现元素水平垂直居中

    html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...

  8. 《网页布局基础篇》—浮动布局和float属性

    浮动布局 <html> <head> <meta charset="utf-8"> <title>浮动</title> ...

  9. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

随机推荐

  1. 使用JavaScript输出带有边框的乘法表

    在学习JavaScript(以下简称为js)过程中,会遇到输出9*9乘法表的问题,我们都知道利用双重for循环可以很简单的在网页中打印出来,可是你在做的过程中有没有想着给这个乘法表加一点花样呢? 下面 ...

  2. synchronized 优化手段之锁膨胀机制!

    synchronized 在 JDK 1.5 之前性能是比较低的,在那时我们通常会选择使用 Lock 来替代 synchronized.然而这个情况在 JDK 1.6 时就发生了改变,JDK 1.6 ...

  3. 开机时自动启动的AutoHotkey脚本

    ;;; 开机时自动启动的AutoHotkey脚本;; 此脚本修改时间 2019年06月18日20时48分;; 计时器创建代码段 ------------------------------------ ...

  4. SQL根据两个日期生成年、月、日

    1 DECLARE @beginTime DATETIME, @endTime DATETIME 2 SET @beginTime ='2019-03-01' 3 SET @endTime ='201 ...

  5. requests 上件中文文件名报错解决方案

    这几天在用wxpy写机器人,在调用里面的上传文件接口的时候,一直报错.经过排查后,发现是不支持中文文件名:在群里问了下作者后才知道是requests惹的祸,默认requests用的是unicode来处 ...

  6. Vue+SpringBoot前后端分离中的跨域问题

    在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...

  7. OpenCV 之 特征匹配

    OpenCV 中有两种特征匹配方法:暴力匹配 (Brute force matching) 和 最近邻匹配 (Nearest Neighbors matching) 它们都继承自 Descriptor ...

  8. 树莓派SG90舵机接法

    我的舵机的三条线是红的.黑色.棕色,接法如下: 棕 : GND 红 : VCC 黄: 信号线 如图所示: 图片来源 如上图所示,写代码时注意舵机的BCM编码是18,而不是物理引脚的编码12.

  9. 关于:org.apache.catalina.connector.ClientAbortException及getOutputStream() has already been called for this response的异常处理

    1.异常场景: 在进行将数据用word导出或者Excel导出的时候.抛出的异常getOutputStream() has already been called for this response 导 ...

  10. 解决vscode+python不提示numpy函数的问题

    前言 使用vscode编写numpy代码时,对于numpy.array()等方法总是无法提示.查找了很多博客后,大部分都是修改配置和安装多种vscode插件,经过尝试后方法对于我来说无效.最后在调试p ...