CSS中的几种垂直居中方法

来源：互联网发布：微信后台php 编辑：程序博客网时间：2024/05/18 00:47

在CSS中要实现水平居中很容易实现，给标签设置一个宽度，并设置margin属性，margin 0 auto；即可实现块级元素的水平居中。而要实现垂直居中则要相对复杂一点，以下介绍几种方法实现垂直居中。
1.首先清除祖先元素的样式，通过设置margin：0；padding:0;设置需要居中元素的postion属性，代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        html,body {            width: 100%;            height: 100%;            margin: 0;            padding: 0;        }        .test{            width: 300px;            height: 300px;            margin: 0 auto; /*水平居中*/            position: relative; /*脱离文档流*/            top: 50%; /*偏移*/            margin-top: -150px;         }    </style></head><body>    <div class="test"></div></body></html>

设置postion为relative,由于不知道文档的具体大小，top的值可用百分比代替，margin-top将自身向上平移自身宽度的一半，这样可实现垂直居中。margin-top可用CSS3中的新属性，transform：translateY（-50%），使div向上平移自身的一半。
在这里讲一下关于自己对relative和absolute的理解，relative代表的是相对布局，指元素的相对位置，没有脱离文档流；absolute绝对定位，脱离文档流，通过设置父元素的postion的值为relative，子元素的postion的值为absolute，使子元素相对于父元素的位置移动。
2.第二种方法是采用CSS3中的弹性布局（flex），使用这种方法只需要设置父元素的display的值为flex，例子代码如下所示。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        html,body {            width: 100%;            height: 100%;            margin: 0;            padding: 0;        }        body{            display:flex;            align-items:center;//定义body中的元素垂直居中            justify-content:center;//定义body中的元素水平居中        }        .test{            width: 300px;            height: 300px;        }    </style></head><body>    <div class="test"></div></body></html>

3.使div中的文字垂直居中，可以通过设置line-height:”div的高度”；水平居中通过设置text-aligin：center。
`

0 0