div中的元素居中如img text ul div 等（待补充）

心已赠人 2022-07-15 01:55 134阅读 0赞

在平时工作中 ，div中的内容垂直居中一直是个重点：

下面就简单的介绍几种常用的方法 ，欢迎大家评论和补充相互学习

1、行高（line-height）//容器固定大小

如何使单行文字垂直居中，只需设置容器line-height  和height一样的值即可 例如：

.firsttest \{

width:250px;

height:40px;

line-height:40px;

border:1px solid black;

</style>

大家好，欢迎大家来到我的博客

</div>

2、多行文字     //容器固定大小，容器不适用浮动

<div class="secondtest">  
<span class="align\_word">欢迎大家来到我的博客 欢迎大家来到我的博客欢迎大家来到我的博客欢迎大家来到我的博客欢迎大家来到我的博客欢迎大家来到我的博客欢迎大家来到我的博客  
</span></div>

在chrome有用，IE7 不起作用

![Image 1][]

3、图片居中，用到了与2类似的方法（IE 7仍然不可用）:

display:table-cell;  
width:550px;

height:400px;

padding:0 0.1em;

border:4px solid \#beceeb;

color:\#069;

text-align:center;

vertical-align:middle;\}  
    </style>

![Image 1][]

4、下面这种方法是看了某一篇博客学习来的解决了兼容性问题

博客给说明是：

**原理简述：**

一句话，将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐。

其核心原理其实与第二种利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大，目的是撑开IE下默认文字空间的高度，其性质类似于空格，然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；而这里将这个看不见的文字空间实例成一张透明的gif图片，高度可以轻松设置为外部标签的高度，然后通过vertical-align:middle对齐，就实现效果了，在各个浏览器下都是一样的表现，不需要担心什么兼容性的问题。

没怎么看懂打算，但是感觉很厉害，留着以后慢慢学习

5、让div中的div居中：

<div class="secondtest">  
     <div class="show\_img">fdfdf</div>         
  
</div>

![Image 1][]

6、其实针对方法2   3 中IE7不能使用的方法，在博客中还有一种方法：

\*\{margin:0;padding:0;\}  
\#wrap \{  
  border:1px solid \#000;  
 background:\#F00;  
 width:400px;  
 height:400px;  
 position:relative;   
\}   
\#subwrap \{  
 position:absolute;  
  top:50%;   
  left:50%;  
\}   
\#content \{  
 border:1px solid \#000;  
 position:relative;  
 top:-50%;  
 left:-50%;  
 color:\#FFF;   
\}  
    </style>

7、也是借鉴来的

.center {
      
      width: 300px;
      height: 200px;
      padding: 10px;
      border: 1px solid #ccc;
      background:#000;
      color:#fff;
      margin: 20px auto;
    
    
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      
      display: -moz-box;
      -moz-box-orient: horizontal;
      -moz-box-pack: center;
      -moz-box-align: center;
      
      display: -o-box;
      -o-box-orient: horizontal;
      -o-box-pack: center;
      -o-box-align: center;
      
      display: -ms-box;
      -ms-box-orient: horizontal;
      -ms-box-pack: center;
      -ms-box-align: center;
      
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
    }

<div class="center">
      <div class="text">
        <p>我是多行文字</p>
        <p>我是多行文字</p>
        <p>我是多行文字</p>
      </div>
    </div>

[Image 1]: