垂直居中的实现

垂直居中的实现

---

固定宽高垂直居中

代码块

position:absolute;
left:50%;
top:50%;
width:400px;
height:200px;
margin-left:-200px;
margin-top:-100px;

不固定宽高的div垂直居中

代码块

position:fixed;
left:50%;
top:50%;
width:50%;
height:50%;
-webkit-transform:translateX(-50%);
-webkit-transform:translateY(-50%);

四分之一圆（1）

代码块

width:100px;
height:100px;
border-radius:50%;
postion:absolute
通过移动到父边框的角落，然后overflow:hidden;将超出部分隐藏；

四分之一圆（2）

代码块

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

浮动

盒子的位移属性有四个“top、right、bottom和left”，用来指定元素的定位位置和方向。这些属性只能在元素的“position”属性设置了“relative、absolute和fixed”属性值，才生效。著作权归作者所有。

position

绝对定位的参考点是其祖先元素设置了“relative”或者“absolute”值 。设置了位移属性的相对定位元素，他在页面中仍然是正常的、静态的，仍属于自然流。在这种情况下，其他元素不会占用相对定们元素当初的位置。此外，其他元素没有进行位置移动时，相对定伴元素可能会和其他元素重叠。

转载于:https://www.cnblogs.com/hxloveweb/p/7113413.html