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. 【洛谷P2623物品选取】动态规划

    分析 各种背包弄在一起. AC代码 // luogu-judger-enable-o2 #include <bits/stdc++.h> using namespace std; #def ...

  2. RegisterClass/RegisterClassEx -- 注册窗口类

    (1)函数原型 1 //RegisterClass 2 ATOM RegisterClass( 3 const WNDCLASS * lpWndClass //Long pointer to a WN ...

  3. 如何选择数据分析工具?BI工具需要具备哪些功能?

    数据分析使企业能够分析其所有数据(实时,历史,非结构化,结构化,定性),以识别模式并生成洞察力,以告知并在某些情况下使决策自动化,将数据情报与行动联系起来.当今最好的数据分析工具解决方案支持从访问.准 ...

  4. Qt+腾讯IM开发笔记(一):腾讯IM介绍、使用和Qt集成腾讯IM-SDK的工程模板Demo

    前言   开发一个支持全国的IM聊天,可以有基本的功能,发送文本.图片.文件等等相关内容.   腾讯IM产品 概述   腾讯即时通信IM是腾讯推出的即时聊天程序,当前时间为2020年3月(腾讯IM的优 ...

  5. 在vue中使用微信jssdk的getLocalImgData怎么让多张图片显示

    在循环里添加了一个异步请求类型的,所以我让他每次执行完毕后再执行下一次操作,其中用到了async 和 await,将异步变为同步去执行. 1 // 图片上传 2 handleImage(typeVal ...

  6. vulnhub-DC:6靶机渗透记录

    准备工作 在vulnhub官网下载DC:6靶机DC: 6 ~ VulnHub 导入到vmware,设置成NAT模式 打开kali准备进行渗透(ip:192.168.200.6) 信息收集 利用nmap ...

  7. Android开发失业六个月了,无限的焦虑

    最近到网上看到这样一个帖子: Android开发,坐标魔都:目前为止已经失业六个月,找工作期间,尤其是最近两天确实心态不好.要么没有面试,要么给的工资不符合预期( hr 压价太狠了,原先说的 19k, ...

  8. Linux进程理解与实践(四)wait函数处理僵尸进程

    Wait的背景 当子进程退出的时候,内核会向父进程发送SIGCHLD信号,子进程的退出是个异步事件(子进程可以在父进程运行的任何时刻终止) 子进程退出时,内核将子进程置为僵尸状态,这个进程称为僵尸进程 ...

  9. Python脚本文件中使用中文

    Python做图形用户界面(GUI)开发时经常要在界面上显示中文,需要做如下处理(详见[1]和[2]2.3节): 在py文件的首行写上:# -- coding:utf-8 -- 保存py文件时要存为u ...

  10. 一张图说明 iaas paas saas的区别

    图片来源:https://www.bilibili.com/video/BV1QJ411S7c4  P2 云服务的三种模式 1laaS(基础设施即服务) laas(Infrastructure as ...