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>
  • 相关阅读:
    176. Second Highest Salary
    175. Combine Two Tables
    172. Factorial Trailing Zeroes
    171. Excel Sheet Column Number
    169. Majority Element
    168. Excel Sheet Column Title
    167. Two Sum II
    160. Intersection of Two Linked Lists
    个人博客记录
    <meta>标签
  • 原文地址:https://www.cnblogs.com/zhanqun/p/5249498.html
Copyright © 2011-2022 走看看