zoukankan      html  css  js  c++  java
  • html垂直居中

    参考于http://www.cnblogs.com/yugege/p/5246652.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .content {
                width: 300px;
                height: 300px;
                background: orange;
                margin: 0 auto; /*水平居中*/
                position: relative; /*脱离文档流*/
                top: 50%; /*偏移*/
                margin-top: -150px; 
            }
        </style>
    </head>
    <body>
        <div class="content"></div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .content {
                width: 300px;
                height: 300px;
                background: orange;
                margin: 0 auto; /*水平居中*/
                position: relative; /*脱离文档流*/
                top: 50%; /*偏移*/
                transform: translateY(-50%);
            }
        </style>
    </head>
    <body>
        <div class="content"></div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style>
            html,body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        
            body {
                display: flex;
                align-items: center; /*定义body的元素垂直居中*/
                justify-content: center; /*定义body的里的元素水平居中*/
            }
            .content {
                width: 300px;
                height: 300px;
                background: orange;        
            }
        </style>
    </head>
    <body>
        <div class="content"></div>
    </body>
    </html>
  • 相关阅读:
    【Linux】——sleep无法正常休眠
    【网络——Linux】——IPMI详细介绍【转】
    【Linux】——ctags
    10086 8元套餐
    建置 区域划分
    几何
    孙武
    监察委
    python 内置函数
    Oracle cursor and table
  • 原文地址:https://www.cnblogs.com/zhanqun/p/5249498.html
Copyright © 2011-2022 走看看