页面架构之 - 居中布局

最新推荐文章于 2021-06-04 19:05:53 发布

yxy_elena

最新推荐文章于 2021-06-04 19:05:53 发布

阅读量174

点赞数

分类专栏： web前端基础知识

本文链接：https://blog.csdn.net/yxyCyndi/article/details/103924800

版权

web前端基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、水平布局（居中）

1.使用text-align 和 inline-bolck属性

提示：对父容器（块级元素）设置 text-align:center会对子容器所有有inline-属性的值的元素起作用

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .parent-one {
            width: 200px;
            height: 100px;
            background-color: blue;
            text-align: center;
        }
        .child-one{
            background-color:red;
            display: inline-block;
        }
    </style>
</head>

<body>
    <!--水平居中-->
    <div class="parent-one">
        <div class="child-one">child</div>
    </div>
    </div>
</body>

</html>

2.使用margin 和 table属性

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .parent-one {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
        .child-one{
            background-color: brown;
            display: table;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <!--水平居中-->
    <div class="parent-one">
        <div class="child-one">child</div>
    </div>
    </div>
    <!--垂直居中-->

    <!--水平垂直居中-->


</body>

</html>

3.使用positon 和transform属性

提示： transform: translateX() - 是以自身为参考点移动

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .parent-one {
            width: 200px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
        .child-one{
            background-color: brown;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
    <!--水平居中-->
    <div class="parent-one">
        <div class="child-one">child</div>
    </div>
    </div>
</body>

</html>

4.（采纳）flex布局方式

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .parent-one {
            width: 200px;
            height: 100px;
            background-color: blue;
            display: flex;
            justify-content: center;/*方法1*/
        }
        .child-one{
            background-color: brown;
            margin: 0 auto;/*方法2*/
        }
    </style>
</head>

<body>
    <!--水平居中-->
    <div class="parent-one">
        <div class="child-one">child</div>
    </div>
    </div>
</body>

</html>

一、垂直布局（居中）

1.使用table-cell和vertical-align属性

提示：子元素会与父元素宽度一样（原因： align-item属性值默认sketch）

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .parent-one {
            width: 200px;
            height: 100px;
            background-color: blue;
            display: table-cell;
            vertical-align: middle;
            
        }
        .child-one{
            background-color: brown;
            
        }
    </style>
</head>

<body>
    <!--水平居中-->
    <div class="parent-one">
        <div class="child-one">child</div>
    </div>
    </div>
    <!--垂直居中-->

    <!--水平垂直居中-->


</body>

</html>

2.使用position和transform: translateY（）

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .parent-one {
            width: 200px;
            height: 100px;
            background-color: blue;
            position: relative;
            
        }
        .child-one{
            background-color: brown;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <!--水平居中-->
    <div class="parent-one">
        <div class="child-one">child</div>
    </div>
    </div>


</body>

</html>

3.（采纳）使用flex属性和align-items

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .parent-one {
            width: 200px;
            height: 100px;
            background-color: blue;
            display: flex;
            align-items: center;
           
        }
        .child-one{
            background-color: brown;
           
        }
    </style>
</head>

<body>
    <!--水平居中-->
    <div class="parent-one">
        <div class="child-one">child</div>
    </div>
    </div>


</body>

</html>

三、水平垂直居中

1.flex布局居中

<!DOCTYPE HTML>
<html>

<head>
    <style>
        .parent-one {
            width: 200px;
            height: 100px;
            background-color: blue;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        .child-one{
            background-color: brown;
           
        }
    </style>
</head>

<body>
    <!--水平居中-->
    <div class="parent-one">
        <div class="child-one">child</div>
    </div>
    </div>


</body>

</html>

yxy_elena

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面架构之 - 居中布局

一、水平布局（居中）1.使用text-align 和 inline-bolck属性提示：对父容器（块级元素）设置 text-align:center会对子容器所有有inline-属性的值的元素起作用<!DOCTYPE HTML><html><head> <style> .parent-one { ...
复制链接

扫一扫