Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

Four CSS vertical centering methods

一个新手

Release： 2017-10-02 19:41:58

Original

1445 people have browsed it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
    .parent{width: 400px;height: 400px;border:1px solid grey;display: }
    .children{width: 200px;height: 200px;background-color: #ccc;}
    /*table-cell*/
    .parent{display: table-cell;text-align: center;vertical-align: middle;}
    .children{display: inline-block;}
    /*flex*/
    .parent{display: flex;justify-content: center;align-items: center;}
    /*position transform*/
    .parent{position: relative;}
    .children{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);}
    /*position margin 不推荐使用，使用必须设置宽高*/
    .parent{position: relative;}
    .children{position: absolute;top:0;left: 0;bottom: 0;right: 0;margin: auto;}
</style>
</head>
<body>
    <p class="parent"  >
        <p class="children">
        </p>
    </p>
</body>
</html>

Copy after login

The above is the detailed content of Four CSS vertical centering methods. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css method

source：php.cn

Previous article：Summary of using custom list items list-style Next article：How to quickly generate ordered (ol) and unordered (ul) lists in HBulider

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn