博客

CSS——div垂直居中及div内文字垂直居中

  • Post author:
  • Post category:其他


最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。

一、div垂直居中的一些方法：

1.当height、width固定大小时， 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
        <style>
            html,body{
    
                margin: 0px;
                padding: 0px;
                height: 100%;
                width: 100%;
            }
            .div1{
    
                width: 300px;
                height: 300px;
                background: red;
                margin: 0 auto; /*水平居中*/
                position: relative;
                top: 50%; /*偏移*/
                margin-top: -150px;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
    </body>
</html>

运行结果：

2.当height、width大小是百分比时，有如下三种方法可以实现：

法一：使用CSS3的transform属性 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
        <style>
            html,body{
    
                margin: 0px;
                padding: 0px;
                height: 100%;
                width: 100%;