学习中的问题:04如何居中一个元素?

在做页面布局的时候,经常会遇到使一个元素居中这种情况,今天系统的总结一下。

1.行内元素

水平居中

为其父元素设置属性text-align:center;

垂直居中

height和line-height的值相同,只写line-height也是可以的。

2.块级元素

水平居中

如果这个块级元素给了宽度,那么应用margin:0 auto;属性可以使其水平居中

如果没给这个块级元素宽宽度,请看下面:

<div class="father">
    <div class="son"></div>
</div>
.father{
	    width: 400px;
	    height: 300px;
	    position: relative;
	    background: yellow;
}
	    .son{
	    width: 100px;
	    height: 100px;
	    position: absolute;
	    background: blue;
	    left: 50%;
	    transform: translateX(-50%);
}

可以通过定位,向右移动父元素的50%,此时超过中线半个本身长度,所以使用translateX左移50%自身长度。

垂直居中

如果给了高度,可以通过计算,使margin的top和bottom的值相等。

也可以在设置定位后,将其top和bottom的值设置为同一值,然后设置margin:auto;也可以达到垂直居中的效果。


如果没给高度。

也可以通过向上面水平居中的方式,通过定位,向下移动父元素的50%,此时超过中线半个本身长度,所以使用translateY上移50%自身长度。







阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页