关于html水平垂直居中的问题小结

三叶草

最近遇到很多居中的问题，就花点时间总结了一下放在这里，以后找也方便

1.居中文本

代码如下:

<div class="wrap">
     我在中间……
 </div>
.. height+line-height+text-center（只能居中单行）
 .wrap{
   width:px; 
   height:px;
   border:px solid red; 
   text-align: center;
   line-height: px;
 }

ps:text-align:center只是将元素下面的内联元素居中显示
1.2display:table-cell(多行固定高度居中)

代码如下:

.wrap{
   width:px; 
   height:px;
   border:px solid red; 
   text-align: center; 
   display:table-cell; 
   vertical-align: middle;
 }

display:table-cell：ie67不管用,最好配合display:table;一起用
ie67下：（以后也不用了，不过也放这儿吧）
方法一：（通过em标签高度与父级等高，所以span和em居中就相当于span在父级居中）

代码如下:

<div class="wrap">
  <span>
    我在中间…… 我在中间…… 我在中间…… 我在中间……
  </span>
  <em></em>
 </div>
  .wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center;
  }
  .wrap span{
    vertical-align: middle;
    display:inline-block; 
   width:px;
 }
 .wrap em{
   height:%;
   vertical-align: middle; 
   display:inline-block;
 }

方法二：（通过给子元素增加一个绝对定位的父级标签，再配合子元素的相对定位水平垂直居中）

代码如下:

<div class="wrap">
   <span class="span">
    <span class="span">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
   </span>
 </div>
  .wrap{
    width:px; 
    height:px;
    border:px solid red;
    display:table;
    position:relative; 
    overflow: hidden;
  }
  .wrap .span{
   display:table-cell; 
   vertical-align: middle; 
   text-align: center;
   *position:absolute;
   top:%;
   left:%;
 }
 .wrap .span{
   *position:relative;
   top:-%;
   left:-%;
 }

1.3padding（内填充，不用多说）

代码如下:

.wrap{
   width:px;
   border:px solid red;
   padding:px ;
 }

2.居中元素

代码如下:

<div class="wrap">
   <span></span>
 </div>

2.1position:absolute+margin负值（必须要有宽高，才能计算margin）

代码如下:

.wrap{
    width:px; 
    height:px;
    position:absolute; 
    top:%; 
    left:%; 
    margin-top:-px; 
    margin-left:-px;
    border:px solid red;
 }
 .wrap span{ 
   width:px; 
   height:px; 
   background:red;
   position: absolute; 
   top:%; 
   left:%; 
   margin-top:-px; 
   margin-left:-px;
 }

ps：CSS实现DIV水平居中和上下垂直居中

代码如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>上下垂直居中 在线演示 DIVCSS5</title>  
<style>  
#main {  
  position: absolute;  
  width:400px;  
  height:200px;  
  left:50%;  
  top:50%;  
  margin-left:-200px;  
  margin-top:-100px;  
  border:1px solid #00F  
}  
/*css注释：为了方便截图，对CSS代码进行换行*/  
</style>  
</head>  
<body>  
  <div id="main">DIV水平居中和上下垂直居中<a href="https://www.divcss5.com/">DIVCSS5</a></div>  
</body>  
</html>

水平垂直居中原理介绍
这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。

[Html/CSS] 关于html水平垂直居中的问题小结

相关帖子

html+Js获取当前时间代码

nginx启ssi方法，宝塔面板nginx开启ssi

PHP模拟登陆抓取页面内容

常用HTML网页跳转的几种方法

uniapp 截屏扫码

CSS3荧光灯文字闪烁动画特效

如何加强网站安全防范

解决编辑器图片插入多次但发布后只显示一次问题

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

三叶草 LV3