CSS_html/css_WEB-ITnose を使用して垂直方向の中央揃えを実現するいくつかの方法-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose を使用して垂直方向の中央揃えを実現するいくつかの方法

WBOY

リリース： 2016-06-24 11:15:34

オリジナル

1268 人が閲覧しました

最近、リレーショナルデータベース、MySQL と Postgre について学習し、最近は練習するために自分のブログをセットアップして、クラウド上にプロジェクトを展開しています。は良心だと考えられており、ブログを書くのに十分なスペースを自分で構築できます。もともと毎日投稿する予定だったので、遅くなって一日おきに更新することもあります。今後も何か投稿できるように頑張ります。ブログが完成したら、私のような初心者の参考として SQL データベースの基本について書きます。無視してください~

そのときは。水平方向の中央揃えに関しては、多くの人は最初に「水平方向に中央揃えにするべきだ」と反応します。CSS3 の FlexBox は非常に強力なので、友達がいません。しかし、Liangchen が今日話したいのは、CSS の垂直方向の中央揃え方法です。以下はかわいい分割線です。何？可愛くないと言う勇気はありますか？

方法 1: テーブルレイアウトメソッド

直接?:

<!DOCTYPE html><br /><html lang="en"><br /><head><br />    <meta charset="UTF-8"><br />    <title>Title</title><br /></head><br /><body><br /><style><br />    .container{<br />        width: 200px;<br />        height: 200px;<br />        font-weight:bold;">deepskyblue;<br />        display: table;<br />    }<br />    .cell{<br />        display: table-cell;<br />        vertical-align: middle;<br />        font-weight:bold;">lawngreen;<br />    }<br />    .content{<br />        font-weight:bold;">yellow;<br />    }<br /></style><br />    <div class="container"><br />        <div class="cell"><br />            <div class="content"><br />                Content<br />            </div><br />        </div><br />    </div><br /></body><br /></html>

ログイン後にコピー

効果:

分析

利点: コンテンツの高さを動的に変更でき、親コンテナーが高さが足りないため切り詰められました。

欠点: IE8 はまだ完成していません。

方法 2: レイアウトオブジェクトの高さを固定する

<!DOCTYPE html><br /><html lang="en"><br /><head><br />    <meta charset="UTF-8"><br />    <title>vertical-center</title><br /></head><br /><body><br />    <style><br />        .container{<br />            width: 200px;<br />            height: 200px;<br />            background-color: #003366;<br />            position: relative;<br />            text-align: center;<br />            display: table;<br />        }<br />        .content{<br />            width:100px;<br />            height: 100px;<br />            background-color: yellow;<br />            position: absolute;<br />            top:50%;<br />            margin-top: -50px;<br />　　　　     left:50%;<br />　　        margin-left:-50px;  <br />        }<br />        .point{<br />            width:50px;<br />            height: 50px;<br />            position: absolute;<br />            top: 50%;<br />            margin-top: -25px;<br />            left:50%;<br />            margin-left:-50px;<br />            background-color: green;<br />        }

ログイン後にコピー

    </style><br /><br />    <div class="container"><br />        <div class="content"><br />            <div class="point"><br />                point goes here.<br />            </div><br />        </div><br />    </div><br /></body><br /></html>

ログイン後にコピー

このようにして、垂直方向と水平方向のセンタリングを実現しました

上記の方法には制限があります。以下は一般的な方法です。 CSS3 によるものですが、ユニバーサルです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>haorooms不固定高度div写法</title> <style>.center { position: fixed; top: 50%; left: 50%; background-color: #000; width:50%; height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);} </style></head><body> <div class="center"></div></body></html>

ログイン後にコピー

ほら、マージンをtranslateに変更しただけです。他のブラウザでの記述は次のとおりです。

-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);

ログイン後にコピー

justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中display:-webkit-flex;

ログイン後にコピー

とりあえず食べてみましょう〜