如何居中div, 如何居中一个浮动元素?_

安安要做程序媛

第一种，position:relative很重要。

如果父元素相对定位，子元素绝对定位，此时依旧是margin-left: 50%, left: -5px;

第二种方法感觉并不是太好。因为left左移之后，还会有个二分之一的宽度。

编辑于 2017-05-02 16:38:52 回复(0)

牛客841543168号

.father{
position: relative;

}

.son{
position: absolute;
float: left;
margin: 0 50%;
transform: translateX(-50%);
}

发表于 2020-02-26 18:38:47 回复(0)

是**

1.div为块级元素，居中块级元素首先要设置宽度，然后margin:0 auto;就居中了。

<style>

.a{

width:100px;

margin:0 auto;

background:red;

}

</style>

2.居中浮动元素就麻烦一点了。

<style>

.box{

position: relative;

left:50%;

float:left;

}

.item{

position: relative;

left:-50%;

float:left;

background: red;

}

</style>

</div>

注：left:50%;这个left按照百分比来设置left值实际移动是按父容器的宽度来算，

可以先看成box容器为body宽度为也就是浏览器宽度，left:50%;就是向右移动到中间，

现在还要向左移动浮动元素item一半的距离，box的float是为了让box自身收缩，这样item的父容器的宽度就是本身的宽度了，再设置为left:-50%;也就是向左移动自身宽度的一半。

编辑于 2017-05-03 14:52:50 回复(1)

录音_笑

在页面居中：

.example{
    height: 200px;
    width: 200px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

左右居中：

.sample{
    height: 200px;
    width: 200px;
    background-color: blue;
    margin: 0 auto;
}

上下居中：

.instance{
    height: 200px;
    width: 200px;
    background-color: gray;
    position: fixed;
    top: 50%;
    margin-top: -100px;
}

fixed 定位相对于窗口，absolute定位相对于已经定位的父级元素（fixed，absolute，relative）。

发表于 2020-04-01 23:58:53 回复(0)

名字被占用的Aimee

1.父相子绝，left:50% transform:translateX(-50%) 2.margin 0 auto 3.父textalign:center

发表于 2020-03-10 11:24:58 回复(0)

sunshinebigboy666

<div style="margin:0px auto;"><div style="float:left;"></div></div>

发表于 2017-05-02 16:26:10 回复(0)

桃枝

float:center

发表于 2019-11-13 08:58:00 回复(0)

Ertsul

flex布局

发表于 2018-09-17 17:02:37 回复(0)

闪闪闪闪闪✨

1

发表于 2017-05-02 22:46:11 回复(0)

如何居中div, 如何居中一个浮动元素?

问题信息

热门推荐

相关试题