css中水平垂直居中对齐布局一些实例总结

冷不防 2022-08-01 23:34 261阅读 0赞

水平居中，如果知道元素的宽度，则可以使用

如果是内联元素居中，那么直接用text-align:center则行

如果未知元素宽度，并且非内联元素，那么下面给出的几种方案也适合你。

用CSS来实现元素的垂直居中效果是件苦差事，虽然说实现方法有多种，但有很多方式在某些浏览器下可能无法正常的工作。接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处。

方法一：  
这种方法用来实现单行垂直居中是相当的简单的，你只要保证元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。不过这种方法局限性太大，只有单行文本的元素才适用，所以在多行元素中是不能使用这种方法的。

Html Markup

优点：

适合在所有浏览器，没有足够空间时，内容不会被切掉

缺点：

仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。

这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段

第一种：相对定位法

原理是父类浮动的同时向左left:50%,而子类则向左浮动的同时left:50%;

<table style="color:rgb(68,68,68); font-family:STHeiti; font-size:15px; line-height:26px; background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,0,0); list-style:none; margin:0px; padding:0px"> &nbsp;代码如下</td> 
   <td align="center" style="color:rgb(0,0,0); list-style:none; margin:0px; padding:0px"> 复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="color:rgb(0,0,0); list-style:none; margin:0px; padding:10px"> <p style="list-style:none; margin-top:0px; margin-bottom:0px; padding-top:8px; padding-bottom:8px; font-size:14px; word-wrap:break-word"> &lt;style type="text/css"&gt;<br> .centerlist {position:relative;left:50%;float:left;}<br> .centerlist li {position:relative;right:50%; z-index:2;float:left}<br> &lt;/style&gt;<br> &lt;ul class="centerlist"&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem i<a href="http://www.111cn.net/fw/photo.html" style="font-size:15px; color:rgb(45,100,179)" rel="nofollow">ps</a>um dolor.&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor.&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor.&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor.&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor.&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor.&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor.&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor.&lt;/a&gt;&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor.&lt;/a&gt;&lt;/li&gt;<br> &lt;/ul&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

第二种：强制内联

局限：块级元素改为内联元素，那么高度、宽度、margin-top,margin-bottom, padding-top,padding-bottom,等都不能用。

第三种： 使用inline-block

如果大家看过我之前写的inline-block替换float可能就会清楚这个属性的好处

<table style="color:rgb(68,68,68); font-family:STHeiti; font-size:15px; line-height:26px; background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td style="color:rgb(0,0,0); list-style:none; margin:0px; padding:0px"> &nbsp;代码如下</td> 
   <td align="center" style="color:rgb(0,0,0); list-style:none; margin:0px; padding:0px"> 复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="color:rgb(0,0,0); list-style:none; margin:0px; padding:10px"> <p style="list-style:none; margin-top:0px; margin-bottom:0px; padding-top:8px; padding-bottom:8px; font-size:14px; word-wrap:break-word"> &lt;style type="text/css"&gt;<br> .centerlist_inline-block{text-align: center; font-size:0; -letter-spacing:-1px;}<br> .centerlist_inline-block li{display: inline-block; *display: inline; *zoom:1; font-size:12px; letter-spacing:normal;&nbsp;<a href="http://www.111cn.net/list-189/" style="font-size:15px; color:rgb(45,100,179)" rel="nofollow">word</a>-spacing:normal;}<br> &lt;/style&gt;<br> &lt;ul&gt;<br> &lt;li&gt;&lt;a href=""&gt;lorem1&lt;/a&gt;&lt;/li&gt;<br> &lt;li&gt;&lt;a href=""&gt;lorem1&lt;/a&gt;&lt;/li&gt;<br> &lt;li&gt;&lt;a href=""&gt;lorem1&lt;/a&gt;&lt;/li&gt;<br> &lt;li&gt;&lt;a href=""&gt;lorem1&lt;/a&gt;&lt;/li&gt;<br> &lt;/ul&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

第四种

缺点是不兼容ie6，ie7

推荐使用inline-block这种水平居中的方法，既保留了块级元素特性，而且完美兼容。就是代码有点多。另外你还可以使用表格的方式来水平居中。

说完了水平居中，下面说垂直居中。

如果元素是内联元素，并且只有一行，则我们可以通过line-height来设置与其高度同样大小，则实现了垂直居中了。

**多行文字的水平垂直居中**

一、大小不固定，多行文字的垂直居中

① 单行文字  
可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3em; line-height:3em; ……  
显示结果如下图：

**单行文本垂直居中对齐**

② 多行文字  
如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？  
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。  
核心css代码如下，  
外部div标签：

内部span标签：

**行数不固定文字垂直居中对齐**  
有几点简要说明：  
1.此例子用em做单位，如果您对em单位了解不够，把握不来的话，可以使用px做单位，值要换；  
2.外部div不能使用浮动；  
3.外部div高度和文字大小比例1.14为宜；  
4.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己试了一下，高度比字体1.5左右的样子；  
5.系统原因，我没能够在IE8下测试。

实现的最终效果和JavaScript演示，您可以狠狠地点击这里⤴去看看。

**二、大小不固定，图片的水平垂直居中**

① 透明gif图片+背景定位的方法  
这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法，对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。  
方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background- position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL 地址。下面就是实例演示页面的效果截图