Skip to content

Latest commit

 

History

History
270 lines (226 loc) · 4.86 KB

水平垂直居中.md

File metadata and controls

270 lines (226 loc) · 4.86 KB
Raw

水平垂直居中

水平居中

1-行级元素

父元素设置text-align: center。

2-块级元素

设置margin: 0 auto;

垂直居中

1-单行文本居中

要求：

  • 单行文本

实现方法：

单行文本的行高等于父级的height，即可实现垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            width: 500px;
            height: 500px;
            background: blue;
        }
 
        #wrapper p{
            line-height: 500px;     /*行高=父级的height，垂直居中*/
            text-align: center;     /*水平居中*/
        }
    </style>
</head>
<body>
 
<div id="wrapper">
    <p>这是一段要垂直水平居中的文字！</p>
</div>
 
</body>
</html>

2-绝对定位

要求：

  • 采用绝对定位方法对页面布局没有影响
  • 子元素高度已知

实现方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            position: fixed;     /*父级*/
            width: 500px;
            height: 500px;
            background-color: blue;
        }

        #content{
            width: 80%;
            height: 40%;            /*已知的高度*/
            position: absolute;     /*子级用绝对定位*/
            top: 50%;               /*先定位到50%的位置*/
            left: 50%;
            margin-top: -20%;       /*往上提本身高度的一半*/
            margin-left: -40%;    
            background-color: red;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="content">垂直水平居中</div>
</div>
</body>
</html>

3-绝对定位2

要求：

  • 绝对定位

优点：

  • 子元素高度不需要已知
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper {
            width: 500px;
            height: 500px;
            position: relative;
            background: blue;
        }
        #content {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="content">水平垂直居中</div>
</div>
</body>
</html>

4-填充

要求：

  • 子元素高度已知

实现方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper{
            background: blue;
            width: 500px;
            height: 500px;
            text-align: center;
            overflow: hidden;
        }
        #null{
            width: 100%;
            height: 50%;                /*负责填充父级元素50%的高度*/
        }
        #content {
            width: 300px;
            height: 200px;              /*已知高度*/
            margin: -100px auto 0 auto; /*往上提本身高度的一半*/
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="null"></div>
    <div id="content">水平垂直居中</div>
</div>
</body>
</html>

5-填充2

要求：

  • 子元素高度已知

实现方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper {
            height: 250px;
            background: blue;
        }
        #null {
            height: 50%;
            width: 100%;
            margin-bottom: -50px;
        }
        #content {
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="null"></div>
    <div id="content">水平垂直居中</div>
</div>
</body>
</html>

6-padding

要求：

  • 子元素高度已知

实现方法：

子元素(height+margin+border+padding) = 父元素height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrapper {
            height: 200px;
            padding: 300px 0;
            background: blue;
        }
        #content {
            width: 100%;
            height: 100px;
            padding: 50px 0;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="content">水平垂直居中</div>
</div>
</body>
</html>