css div居中布局居右布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了css div居中布局居右布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概述

居中布局是最基本的布局方式，下面会通过示例展示如何设置css样式实现居中布局

居中示例

css div居中布局居右布局

<body>
    <div style="display: flex;">
        <!--不设置样式，左上角对齐-->
        <div class="first-div">
            <div class="second-div">
            </div>
        </div>
        <div class="first-div center-one">
            <div class="second-div"> 
            </div>
        </div>
        <div class="first-div" style="display: flex;">
            <div class="second-div center-inner"> 
            </div>
        </div>
    </div>
    <style>
        .first-div
        {
            width:100px;height: 100px; 
            margin-left:10px;
            background: gray;
           
        }
        .second-div
        {
            width:50px;height: 50px;background: green;
        }
        .center-one
        {
           
            display: flex; 
            align-items: center;
            justify-content: center;
        }
        .center-inner
        {
            margin: auto;
        }
    </style>
</body>

居中分析

方法一：在父元素使用如下样式
- display: flex;
- align-items: center; //上下居中
- justify-content: center;//左右居中

父div使用display: flex;
子元素使用margin: auto;
如果只需要上下居中使用margin-top:auto, margin-bottom:auto

居右布局示例

css div居中布局居右布局

<body>
    <div style="display: flex;">
        <!--不设置样式，左上角对齐-->
        <div class="first-div">
            <div class="second-div">
            </div>
        </div>
        <div class="first-div">
            <div class="second-div right-one"> 
            </div>
        </div>
        <div class="first-div right-two">
            <div class="second-div"> 
            </div>
        </div>
    </div>
    <style>
        .first-div
        {
            width:100px;height: 100px; 
            margin-left:10px;
            background: gray;
           
        }
        .second-div
        {
            width:50px;height: 50px;background: green;
        }
        .right-one
        {
           
            float: right;
        }
        .right-two
        {
            display: flex;
            justify-content: right;
        }
    </style>
</body>