• 常见垂直居中方式

    　　小伙伴们经常用margin：0 auto进行水平居中，但是margin： auto；却不能垂直水平居中，下面我们来看看大家是怎么玩的：

    PS：实例中多写了一些代码，容易观察。

    一、容器内居中：下面的代码一试就懂；

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
body{
    height: 2000px;
}
.container{
    border: 2px solid green;
    height: 500px;
    position: relative;
}
.center{
    position: absolute;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 50%;
    height: 50%;
    border: 2px solid blue;
    overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
    <div class="center fixed"> Content </div>
</div>
</body>
</html>

    二、视图内居中，一般用作提示框，登录框等；

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
body{
    height: 2000px;
}
.container{
    border: 2px solid green;
    height: 500px;
    position: relative;
}
.center{
    position: absolute;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 50%;
    height: 50%;
    border: 2px solid blue;
    overflow: hidden;
}
.center.fixed{
    z-index: 999;
    position: fixed;

}
</style>
</head>
<body>
<div class="container">
    <div class="center fixed"> Content </div>
</div>
</body>
</html>

    三、靠左或者靠右

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
.container{
    border: 2px solid green;
    height: 500px;
    position: relative;
}
.center{
    position: absolute;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 50%;
    height: 50%;
    border: 2px solid blue;
    overflow: hidden;
}
.center.is-right{ /* 靠左也一样 */
    left: auto;
    right: 20px;
    text-align: right;
}
</style>
</head>
<body>
<div class="container">
    <div class="center is-right"> Content </div>
</div>
</body>
</html>

    四、自适应/响应式居中

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
.container{
    border: 2px solid green;
    height: 500px;
    position: relative;
}
.center{
    position: absolute;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 50%;
    height: 50%;
    border: 2px solid blue;
    overflow: hidden;
}
.center.responsive{
    width: 60%;
    height: 60;
    min-width: 200px;
    max-width: 400px;
}
</style>
</head>
<body>
<div class="container">
    <div class="center responsive">content</div>
</div>
</body>
</html>

    一定要注意不要让内容区内容超出，如果内容块自身不设置任何padding的话，可以设置max-height: 100%;来保证内容高度不超越容器高度。上面的示例代码中都没有添加over-flow：hidden；

    五、重绘居中：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
.container{
    border: 2px solid green;
    height: 500px;
    position: relative;
}
.center{
    position: absolute;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 50%;
    height: 50%;
    border: 2px solid blue;
}
.center.responsive{
    min-width: 20%;
    max-width: 80%;
    min-height: 20%;
    max-height: 80%;
    resize: both;
    overflow: auto;
}
/*
如果不使用resize:both属性，可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:auto;以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。
绝对居中（AbsoluteCentering）是唯一支持resize:both属性实现垂直居中的技术。
*/
</style>
</head>
<body>
<div class="container">
    <div class="center is-resizable">content</div>
</div>
</body>
</html>

    六、不定高度

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
.container{
    border: 2px solid green;
    height: 500px;
    position: relative;
}
.center{
    position: absolute;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 50%;
    height: 50%;
    border: 2px solid blue;
}
.center{
    display: table;  
    height: auto; 
}
</style>
</head>
<body>
<div class="container">
    <div class="center">content</div>
</div>
</body>
</html>

    其他方法：

    一、负外边距法：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
body{
    height: 2000px;
}
.container{
    border: 2px solid green;
    height: 500px;
    position: relative;
}
.center{
    position: absolute;
    margin: auto;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 50%;
    height: 50%;
    border: 2px solid blue;
}
.center{
    width: 300px;  
    height: 200px;  
    padding: 20px;  
    position: absolute;  
    top: 50%; left: 50%;  
    margin-left: -170px; /* (width + padding)/2 */  
    margin-top: -120px; /* (height + padding)/2 */ 
}
</style>
</head>
<body>
<div class="container">
    <div class="center">content</div>
</div>
</body>
</html>

    二、变形法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
.container{
    border: 2px solid green;
    height: 500px;
    position: relative;
}
.center{
    border: 2px solid red;
}
.center{
    width: 50%;  
      margin: auto;  
      position: absolute;  
      top: 50%; left: 50%;  
      -webkit-transform: translate(-50%,-50%);  
          -ms-transform: translate(-50%,-50%);  
            transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="container">
    <div class="center">content</div>
</div>
</body>
</html>

    三、table-cell居中法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
div{
    width: 170px;
    height: 100px;
    display: table;
    text-align: center;
    border: 1px solid red;
}
span{
    display: table-cell;
    vertical-align: middle;
    border: 1px solid blue;
}
</style>
</head>
<body>
<div id="demo">
    <span>content</span>
</div> 
</body>
</html>

    四、inline-block居中法:据说兼容性相当好

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
#demo{
    height:100px;
    text-align:center;
    font-size:0;
    background-color: #eee;
}
#demo:after,#demo span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
#demo:after{
    content:'';
}
#demo p{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
    font-size:16px;
}
</style>
</head>
<body>
<div id="demo">
    <p>这是一个终极实现的水平垂直居中实例</p>
    <!--[if lt IE 8]><span></span><![endif]-->
</div> 
</body>
</html>

    五、flex-box居中法

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox</title>
<style type="text/css">
.container{
    height: 500px;
    width: 100%;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content{
    width: 50%;
    height: 50%;
    background-color: green;
}
</style>
</head>
<body>
<div class="container">
    <div class="content">content</div>
</div> 
</body>
</html>
  • 相关阅读:
    svn 搭建及环境测试 详细
    mysql 开启用户远程登录
    Linux svn 搭建
    Subversion(svn) 简介
    pytest快速入门(1)--pytest与unittest的比较总揽
    python自动化测试(8)--json字符串与dict之间的相互转换
    web自动化测试(2)--使用xpath实现页面元素的定位
    web自动化测试(1)--web页面元素的8种定位方法
    性能测试入门(1)--性能测试关键指标
    python自动化测试(6)--测试流程mark
  • 原文地址：https://www.cnblogs.com/kiscall/p/4721241.html
Copyright © 2020-2023  润新知