水平垂直居中

实现

demo

demo

源码

css代码：

.container{
width:400px;
height: 200px;
background-color: # ccc;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin:auto;
overflow:hidden;
}
/第一种方式实现圆角/
.left-circle{
background-color: # fc0;
width: 50px;
height: 50px;
border-bottom-right-radius:50px;
}
/第二种方式实现圆角,其实是画一个圆，然后遮住3/4，得要在container中加入overflow:hidden了/
.right-circle{
background-color: # fc0;
width: 100px;
height: 100px;
border-radius:50px;
position: absolute;
bottom:-50px;
right:-50px;
}

水平垂直居中的实现

绝对定位的方式

.container {    width: 400px;     height: 200px;    position: absolute;     left: 50%;     top: 50%;    margin-top: -200px;    /* 高度的一半 */    margin-left: -300px;    /* 宽度的一半 */}

这个方法等于是在手动计算margin的值了，如果不知道div的宽度和高度，我们还得借助js的document来获得，就显得麻烦了。

margin:auto的方式

我用的就是这种方式，通过设置margin:auto来实现居中效果。

这里面最关键的就是要让top/bottom/left/right都得设置为0。

其实这里我不明白的是为什么我单单写了一个margin:auto只是水平居中，根据margin值得设置方法，margin:auto难道不是margin: auto auto auto auto的意思吗？

这样设置了之后结果变成了这样：

强行卖了一波萌~

后来才知道原来margin-top:auto和margin-bottom:auto的计算值是0，所以margin:auto只是水平居中了。

然后要实现水平垂直居中我们只能这样了。先把top/bottom/left/right都设置成0,然后再设置margin:auto就可以实现了：

这里可以参考两个地方：

为什么「margin:auto」可以让块级元素水平居中？

小tip: margin:auto实现绝对定位元素的水平垂直居中

笔记

position

position是决定了元素将如何定位的属性。

值
描述

static
这是默认值。相当于没有定位。

relative
相对定位，相对于正常位置来定位。

absolute
绝对定位，相对于最近一级的不是static的父元素定位。

fixed
绝对定位，相对于浏览器窗口来定位。即便页面滚动，它还是会在相同的位置。

inherit
从父元素继承。

top、bottom、left、right

该属性规定元素的顶部边缘。分别定义了一个定位元素的上下左右外边距边界与其包含块上下左右边界之间的偏移。

注意：对于相对定义元素，如果top和bottom都是auto，则计算值相当于0。

border-bottom-right-radius

这条属性是CSS3新添加的属性。是用来定义右下角边框的形状的。

这条属性可以有两个值，也就是：

border-bottom-right-radius: length|% [length|%];

第一个值是水平半径，第二个值是垂直半径。如果忽略了第二个值，则复制第一个值。

注意：如果长度为0，则边角就是一个正方形；如果只有一个值，则是圆形。

border-radius

这条属性是CSS3新添加的属性。用来设置四个border-*-radius属性，顾名思义就有四个值了。

这样一条border-radius=50px就相当于：

border-top-left-radius:50px;border-top-right-radius:50px;border-bottom-right-radius:50px;border-bottom-left-radius:50px;

参考资料

1. MDN：position：了解 CSS position 属性的基本知识

2. MDN：float：了解 CSS float 属性的基本知识

3. Learn CSS Positioning in Ten Steps：通过具体的例子熟悉 position 属性

4. 清除浮动（clearfix hack）：清除浮动是什么，如何简单地清除浮动

5. StackOverflow：Which method of ‘clearfix’ is best?：清除浮动黑科技完整解读

关键字：html, auto, margin, position

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！