技术标签： css html HTML / CSS
水平居中和垂直居中在编写HTML5静态页面过程中经常遇到，现在就来总结一下对于不同的元素如何实现居中。
一、水平居中：
1、对于行内元素，在父级块级元素css属性中使用 text-align：center即可。
2、对于width固定的块级元素，使用margin:20px auto; /* margin-left 与 margin-right 设置为 auto */
3、对于width不固定的块级元素，有三种常用方法：
(1) 使用table标签，为什么选择方法一加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
下面看实现步骤：
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
第三步：把需要水平居中的元素放到table标签中的td标签中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{
margin:20px auto;
}
/*下面是任务区代码*/
.wrap{
background:#ccc;
}
</style>
</head>
<body>
<table><tbody>
<tr><td>
<p>设置我所在的div容器水平居中 </p>
</td></tr>
</tbody>
</table>
</body>
</html>(2) 改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
text-align:center;}
.container div{
margin:0;padding:0;display:inline;}
</style>
</head>
<body>
<div class="container">
<div>
<span><a href="#">1</a></span>
<span><a href="#">2</a></span>
<span><a href="#">3</a></span>
</div>
</div>
</body>
</html>(3) 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
float:left;
position:relative;
left:50%;
}
.container ul{
/* margin:0;
padding:0;*/
position:relative;
left:-50%;
}
.container li{
display:inline;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">11111111111</a></li>
<li><a href="#">22222222222</a></li>
<li><a href="#">33333333333</a></li>
</ul>
</div>
</body>
</html>二、垂直居中：
1、父元素高度确定的单行文本 的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap{
display:inline;
text-align:center;
}
.wrap h2{
height:100px;
line-height:100px;
background:#ccc;
}
</style>
</head>
<body>
<!--下面是代码任务部分-->
<div class="wrap">
<h2>hi,imooc!</h2>
</div>
</body>
</html>2、父元素高度确定的多行文本:
使用插入 table (包括tbody、tr、td)标签，可以把要垂直居中的div放到table的td中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
table{
margin:20px auto;}
</style>
</head>
<body>
<table><tbody>
<tr><td>
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr>
</tbody></table>
</body>
</html>文章浏览阅读331次。前言`OpenStack`是一个云操作系统，可控制整个数据中心内的大型计算，存储和网络资源池，所有资源均通过具有通用身份验证机制的`API`进行管理和配置。 还提供了一个仪表板，可让管理员进行控制，同时授权其用户通过`Web`界面配置资源。 除了标准的基础架构即服务功能外，其他组件还提供业务流程，故障管理和服务管理等其他服务，以确保用户应用程序的高可用性。`Victoria`是2020最后一个`O..._openstack train octavia
文章浏览阅读3k次，点赞11次，收藏22次。Linux第一个小程序&进度条
文章浏览阅读2.5k次。原文：https://www.lizenghai.com/archives/56035.html#i-2Chrome 80 默认将没有设置SameSite设置为SameSite=Lax谷歌浏览器地址栏输入：chrome://flags/找到：SameSite by default cookies、Cookies without SameSite must be secure设置上面这两项设置成 Disable..._浏览器如何设置不携带session id访问
文章浏览阅读80次。1 概述 前段时间摸索在Java中怎么获取系统信息包括cpu、内存、硬盘信息等，刚开始使用Java自带的包进行获取，但这样获取的内存信息不够准确并且容易出现找不到相应包等错误，所以后面使用sigar插件进行获取。下面列举出了这两种方式获取系统信息的方式及代码。2 使用Java自带包获取系统信息2.1 使用Java自带包获取系统信息代码如下：2.1.1 Bytes.java复制代码pub..._java arm和x86通用获取cpu 内存等信息
文章浏览阅读118次。mickey · 2015/05/25 10:17 0x00 简介这篇主要是取证的，如果我以后技术好了，也会写写powershell在内网渗透中的实战应用，本文所有的内容基本翻译自fireEyE的<<Investigating Powershell Attack&..._powershell save as evtx
文章浏览阅读2.3k次，点赞3次，收藏8次。一、 安装无线驱动去github下载MT7630E的zip包 解压缩目录下输入以下命令sudo apt install build-essential linux-headers-amd64chmod +x install test uninstall bpatchsudo ./install二、 安装显卡驱动1. 获取显卡型号我的是GTX720M2. 查看支持的..._ubuntu18.04 无线网卡驱动
文章浏览阅读386次，点赞10次，收藏9次。前言：人是比较喜欢中缀式的，因为它符合人们的运算习惯；但是机器是不喜欢中缀式，它更喜欢后缀式，也就是逆波兰式。逆波兰式的理解：1.逆波兰式： ab35c-*+=2.计算机计算过程：策略：计算机从左到右进行扫描，遇到操作数入栈，遇到运算符，最靠近栈顶的两个元素出栈。 图示： 1.遇到操作数入栈 2.遇到运算符出栈注意：逆波兰式的符号顺序就是运算顺序。中缀式快速转化成逆波兰式：步骤：1.根据运算优先级加下划线2.去掉步骤1中所..._逆波兰式最简单三个步骤
文章浏览阅读417次。切入点表达式:描述切入点方法的一种表达式。
文章浏览阅读5.5k次，点赞8次，收藏92次。很长时间没有接触MFC相关的知识了，我大概是在大二时候学习的MFC相关知识及图像处理，现在由于要帮个朋友完成个基于C++的程序，所以又回顾了下相关知识。的确，任何知识一段时间过后都比较容易忘记，但回顾起来还是很有印象的。这篇文章主要是回顾以前的MFC基础知识，给对话框添加背景图片和给按钮button添加背景图片；希望此篇基础性文章对大家有所帮助！同时为下次做MFC相关知识提供..._mfc设置背景图片
文章浏览阅读772次。Joint Face Detection and Alignment using Multi-task Cascaded Convolutional NetworkAbstract1. Introduction2. ApproachA. Overall FrameworkB. CNN ArchitectureC. Training3. Experiments论文地址：https://arxiv...._mtcnn算法论文
文章浏览阅读944次。GPU加速计算NVIDIA A100 Tensor Core GPU 可针对 AI、数据分析和高性能计算 (HPC)，在各种规模上实现出色的加速，应对极其严峻的计算挑战。作为 NVIDIA 数据中心平台的引擎，A100 可以高效扩展，系统中可以集成数千个 A100 GPU，也可以利用 NVIDIA 多实例 GPU (MIG) 技术将每个 A100 划分割为七个独立的 GPU 实例，以加速各种规模的工作负载。第三代 Tensor Core 技术为各种工作负载的更多精度水平提供加速支持，缩短获取洞见以及产品_gpu实际使用功率怎么算的
文章浏览阅读191次。当你提到二维码时，大多数人想到的是仓库管理或产品标签等 "工业 "应用，但这篇文章在很大程度上是关于二维码的个人和社会用途。有趣的事实二维（QR）码是在1994年发明的，最近几年由于新冠肺炎的出现，它的"非接触 "特性使其应用广泛。二维码具备良好的解决方案。它可以被几乎所有的手机使用默认的照片应用程序扫描，同样，扫描它们也会根据它们的背景触发某种动作。例如，一个含有URL的QR码允许你在浏览器中打..._python实现二维码隐藏