CSS布局技巧-CSDN博客

本文链接：https://blog.csdn.net/Jhone_csdn/article/details/54692728

text-align:center
相当于TextView中的gravity=”center-horizontal”,当前标签内容水平居中。
vertical_align:middle
垂直居中，使用是有条件的：

1、display:inline-block;
2、line-height:200px /行高为当前标签的高度/

padding-bottom
app中常常用到weight权重来布局适配手机,同样，在html中，我们同样可以相似的使用padding-bottom来做，当padding-bottom取值%时，看文档有“% 定义基于父元素宽度的百分比下内边距。”的说明。

<style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .parent {
            width: 50%;
            padding-bottom: 20%;
            margin-left: 25%;
            float: left;
            background-color: #cccccc;
            padding: 10px;
        }

        .box1 {
            width: 50%;
            padding-bottom: 20%;
            float: left;
            background: #897642;
        }

        .box2 {
            width: 50%;
            padding-bottom: 10%;
            float: right;
            background: #1E8977;
        }

        .box3 {
            width: 50%;
            padding-bottom: 10%;
            float: right;
            background: #6B2590;
        }
    </style>
------------------------------------------------
<body>
<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>