前端学习之旅(六)【定位元素居中】

最新推荐文章于 2024-04-02 14:52:40 发布

·+·+·

最新推荐文章于 2024-04-02 14:52:40 发布

阅读量903

点赞数 27

分类专栏： B大学前端文章标签：学习前端 html css

本文链接：https://blog.csdn.net/qq_62170186/article/details/135626347

版权

B大学前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

任务一

实现已经设计好的元素在父元素中水平方向填充满。

设计好的元素展示：

想要实现的效果：

代码

实现前的代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>定位元素居中</title>
    <style>
        /* 原本设计好的样式，不能修改 */
        .container {
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .inner {
            background-color: orange;
            border: 10px solid black;
            padding: 20px;
            position: absolute;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="inner">居中</div>
    </div>
</body>

</html>

实现效果的代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>定位元素居中</title>
    <style>
        /* 原本设计好的样式，不能修改 */
        .container {
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .inner {
            background-color: orange;
            border: 10px solid black;
            padding: 20px;
            position: absolute;
        }

        /* 添加样式，使inner水平方向填充满父元素 */
        .inner{
            left: 0;
            right: 0;
            /* 添加下面的代码可以实现充满父元素 */
            /* top: 0;
            bottom: 0; */
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="inner">居中</div>
    </div>
</body>

</html>

任务二

实现已经设置好宽高的定位元素在父元素中居中

原本的样式

需要的样式

代码

实现前的代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>定位元素居中</title>
    <style>
        /* 原本设计好的样式，不能修改 */
        .container {
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .inner {
            height: 100px;
            width: 200px;
            background-color: orange;
            border: 10px solid black;
            padding: 20px;
            position: absolute;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="inner">居中</div>
    </div>
</body>

</html>

实现后的代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>定位元素居中</title>
    <style>
        /* 原本设计好的样式，不能修改 */
        .container {
            height: 400px;
            background-color: gray;
            position: relative;
        }
        .inner {
            height: 100px;
            width: 200px;
            background-color: orange;
            border: 10px solid black;
            padding: 20px;
            position: absolute;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
        }

        /* 添加样式，使inner水平方向填充满父元素 */
        .inner{
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="inner">居中</div>
    </div>
</body>

</html>