web前端 html+css

最新推荐文章于 2023-02-10 11:25:35 发布

anshi1593

最新推荐文章于 2023-02-10 11:25:35 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/web15/p/5704486.html

版权

1.行内元素水平居中text-align:center
对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中，可对元素或者父元素使用text-align:center

2.定宽块级元素水平居中margin: 0 auto;

 .container{
          width:500px; /* 元素设置定宽*/ height: 200px; margin:0 auto;/*margin-left和margin-right设置为auto*/ background-color: aquamarine; }

3.使用表格垂直水平居中

如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text- align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效，需要设置display。

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"> <title>表格居中</title> <style type="text/css" > body{ padding:0; margin:0; } .parent{ vertical-align: middle; text-align: center; width: 200px; height:200px; margin:0 auto; background-color: pink; } .child{ display: inline-block; width: 100px; height: 100px; background-color: deeppink; } </style> </head> <body> <table > <tr> <td class="parent"> <div class="child"></div> </td> </tr> </table> </body> </html>

4.使用display:table;margin:0 auto;水平居中

 .child{
          display: table;
          width: 100px; height: 100px; margin:0 auto; background-color: deeppink; }

5.使用display:table-cell垂直水平居中

对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格的居中特性。但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>div居中</title> <style type="text/css" > body{ padding:0; margin:0; } .parent{ display:table-cell; vertical-align: middle; text-align: center; width: 200px; height:200px; margin:0 auto; background-color: pink; } .child{ display: inline-block; width: 100px; height: 100px; background-color: deeppink; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>

效果为

6.单行或多行文本的垂直居中

父元素高度确定的情况下，

单行文本设置父元素的height和line-height一致即可；

多行文本在使用vertical-align:middle的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

7.绝对定位垂直水平居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为 50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或 margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

垂直水平居中

.parent{
            position:relative;/*父元素相对定位*/ width: 500px; height:300px; background-color: pink; } .child{ position: absolute; left:50%; top:50%; width: 300px; height: 200px; margin: -100px 0 0 -150px;/*margin-left为child宽度的一半，margin-top为child高度的一半*/ background-color: deeppink; }

8.另一种绝对定位居中

此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。

 .parent{
            position:relative;/*父元素相对定位*/ width: 500px; height:300px; background-color: pink; } .child{ position: absolute; width: 300px;/*宽高需要固定*/ height: 200px; left:0; right:0;/*left和right必须配对出现来控制水平方向，top、bottom同理*/ top:0; bottom:0; margin:auto;/*这句也是需要的，0 auto水平居中，auto 0 垂直居中*/ background-color: deeppink; }

9.flex布局垂直水平居中

flex布局语法和实例参考阮一峰的博文：Flex 布局教程：语法篇、Flex 布局教程：实例篇

.parent{
            display:flex;
            justify-content:center; align-items:center; width: 500px; height:300px; background-color: pink; } .child{ width: 300px; height: 200px; background-color: deeppink; }