我要招人

去企业版

首页 > 试题广场 >

请用HTML+CSS实现一个定宽定高元素在容器中的水平和垂直

[问答题]

请用 HTML+CSS 实现一个定宽定高元素在容器中的水平和垂直居中。

Daes

style{
    .box{
        width:100px;
        height:100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin:-50px;
    }
}
<div class="box"></div>

编辑于 2020-08-14 13:44:16 回复(0)

找呀找朋友

// flex实现

.father{
                display: flex;
                justify-content: center;
                align-items: center;
            }

// 利用绝对布局

.father{
                position: relative;
            }
            .son{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
// 同绝对布局

.father{
                position: relative;
            }
            .son{
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

发表于 2020-07-24 23:05:48 回复(0)

挖个窟窿过年

<div class="container">
    <div class="item"></div>
</div>

.container {
    display:flex;
}
.item {
    margin:auto;
}

发表于 2020-06-19 16:52:22 回复(0)

Hayleyll

.father{
    width:600px;
    height:800px;
    border: 1px solid #fff;
    display:flex;
}
.son{
    width:200px;
    height:400px;
    background-color:#fff;
    margin:auto;
}

发表于 2020-06-23 17:08:48 回复(2)

曹泽宇123

要不弹性盒子，要不定位加平移,要不在有高度的情况下对应调整，或者line-height等。

1.弹性盒子：

一是，给父级元素加display:flex;align-item:center;justify-content:center;，

一个子元素自然实现。

二是，给父级元素加display:flex;，子元素margin:auto;自动计算完成。

2.定位加平移：

给父级元素加相对定位，子元素top,left都50%，再给子元素加transform:translate(-50%,-50%)

3.在都有宽，高的情况：

给子元素的高改为行高，行高等于父元素，再给子元素加margin:0 auto;等等

发表于 2022-05-16 10:15:21 回复(0)

小布pro

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box1{
            position: relative;
        width:500px;
        height:500px;
        border: 1px solid black;
        }
        .box2 {
            position: absolute;
            left: 50%;
            top: 50%;
          width: 100px;
          height: 100px;
          transform: translate(-50%,-50%);
          background-color: red;
        }
        </style>
    </head>
    <body>
        <div class="box1">
          <div class="box2"></div>
          </div>
    </body>

发表于 2020-08-20 14:59:53 回复(0)

牛客682345279号

main{

height:300px;

width:300px;

display:flex;

justify-content:center;

align-items:center;

border:1px solid green;

}

div{

height:100px;

width:100px;

border:solid 1px red;

}

</style>

<main>

<div>

</div>

</main>

发表于 2021-03-06 15:19:34 回复(0)

白成伟

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

body {

width: 100%;

height: 500px;

border: 1px solid red;

display: flex;

justify-content: center;

align-items: center;

}

div {

width: 100px;

height: 100px;

border: 1px solid red;

}

</style>

<body>

</body>

</html>

发表于 2020-07-20 13:54:51 回复(0)

轻轻的轻轻

.s{

width:200px;

height:200px;

margin:auto;

position:relative:

top:50%;

margin-top:-100px;

}

发表于 2020-06-21 16:53:14 回复(0)

提交观点

问题信息

前端工程师小红书 2020

上传者：小小

难度：

9条回答 55收藏 1657浏览

请用HTML+CSS实现一个定宽定高元素在容器中的水平和垂直

问题信息

热门推荐

相关试题