css水平居中的几种方法，css居中的几种方法

今天小编为大家分享Windows系统下载、Windows系统教程、windows相关应用程序的文章，希望能够帮助到大家！

　　CSS中居中的实现方式有多种，下面一一介绍几种常用的方法。

　　首先，我们来说说使用margin的方式。这种方法适用于固定宽度的块级元素的水平居中。只需要将元素的margin属性设置为auto，或者是设置为0 auto，就可以实现水平居中了。比如，对于一个div元素而言，可以像这样设置样式：

　　div {

　　width: 100px;

　　height: 100px;

　　margin: auto; /*或者margin: 0 auto;*/

　　}

　　其次，我们来谈谈利用line-height来实现垂直居中的方式。将单行文字的line-height属性值设置为其父元素的高度，就可以实现该行文字的垂直居中。但是，这种方式的局限性也很明显。只适用于单行文字的垂直居中。比如：

　　#container {

　　height: 30px;

　　}

　　#content {

　　line-height: 30px;

　　}

　　接下来，我们来说说使用表格的方式。如果你使用表格布局的话，可以轻松地利用td元素的align:center和valign:middle属性实现水平和垂直居中。但是要注意，随着表格布局的使用频率降低，这种方式的实用性也在降低。以一个具体的例子来说，可以像这样设置样式：

　　#table {

　　display: table-cell;

　　width: 200px;

　　height: 200px;

　　vertical-align: middle;

　　text-align: center;

　　}

　　另外一种方式是利用display: table-cell属性来模拟单元格的形式实现居中。通过设置父元素容器为display: table-cell，然后再设置text-align:center和vertical-align:middle来达到水平和垂直居中的效果。但要注意的是，text-align:center只能使非块级子元素水平居中，对块级子元素无效。以一个具体的例子来说，可以像这样设置样式：

　　#container {

　　display: table-cell;

　　width: 200px;

　　height: 200px;

　　vertical-align: middle;

　　text-align: center;

　　}

　　然后，我们来谈谈绝对定位居中的方法。这种方法使用相对较多，但是需要子元素有固定的宽高。具体的代码如下：

　　html, body {

　　width: 100%;

　　height: 100%;

　　}

　　body {

　　position: relative;

　　}

　　body > div {

　　position: absolute;

　　width: 100px;

　　height: 100px;

　　left: 50%;

　　top: 50%;

　　margin: -50px 0 0 -50px;

　　}

　　最后，我们来介绍一种比较厉害的方法，使用translate(-50%, -50%)。这种方法可以看作是绝对定位的改良版。之前的方法只能实现固定宽高元素的居中，而使用transform: translate(-50%, -50%);则可以使不固定宽高的元素实现居中的效果。因为translate属性的百分比值是根据元素本身而非父元素来计算的。具体的代码如下：

　　#father {

　　width: 200px;

　　height: 200px;

　　position: relative;

　　}

　　#child {

　　position: absolute;

　　left: 50%;

　　top: 50%;

　　transform: translate(-50%,-50%);

　　-webkit-transform: translate(-50%,-50%);

　　}

wWw.Xtw.com.Cn系统网专业应用软件下载教程，免费windows10系统,win11,办公软件,OA办公系统,OA软件,办公自动化软件,开源系统,移动办公软件等信息，解决一体化的办公方案。