CSS之垂直居中、比border更细的线、浮动清除

标签：strong   top   平移   -o   hid   nsf   class   垂直居中   方式   

一. 垂直居中

　　写页面的时候，尤其像提示信息类，为了更好的视觉体验，要求是垂直居中。列出以下三种实现方式：

　　第一种：居中的部分绝对定位并平移本身宽高的各一半

　　　　position: absolute;
　　　　top:50%;
　　　　left:50%;
　　　　transform: translate(-50%, -50%);

　　注意:由于仅仅absolute的定位会引起脱离文档流，如果居中部分的父元素不是占满整个可视区域，不要忘记对父元素做相对定位或绝对定位的处理（即position:relative;或者position:absolute;）。

　　第二种：采用弹性布局与外边距的方式

　　　　父元素：

　　　　　　display: flex;

　　　　子元素：

　　　　　　margin: auto;

　　第三种：采用弹性布局的方式， 并设置父元素的主轴 与交叉轴均为居中　　　

　　　　父元素：　　

　　　　　　display: flex;
　　　　　　justify-content: center;
　　　　　　align-items: center;

二. 比border更细的线

　　在一些页面的分界线，使用border设置即便设宽度为1px，仍显得粗。解决方法如下：  

　　.element:before {
　　　　content:"";
　　　　width:200%;//由于整体缩为原来的一半，宽度采用原先的2倍
　　　　height:200px;
　　　　position:absolute;
　　　　top:0;
　　　　left:0;
　　　　border-bottom:1px solid #666;
　　　　box-sizing:border-box;
　　　　-webkit-transform:scale(0.5);
　　　　-webkit-transform-origin:0 0;
　　　　transform:scale(0.5);
　　　　transform-origin:0 0;
　　}        

　　注意：结合父元素的是否完全占据整个页面，设置父元素的定位。

三.  浮动清除

　　在设置元素float:left;或者float:right;时会引起元素脱离文档流。可采用以下四种方式来解决：

　　第一种：为父元素设置高度，需要知道设置成浮动的子元素 的高度。     　　

　　第二种：父元素设置溢出隐藏，overflow:hidden;

　　第三种：在设置浮动的元素新添加同级，并设置clear:both;   

　　第四种：为浮动元素的父元素添加伪元素(:after)

　　　　.parent:after {

   　　　　  content: "";

  　　　　  display: block;

    　　　　 height: 0;

   　　　　 clear: both;

    　　　　 visibility: hidden;　　　　

    　　　}

　　　　.parent{

　　　　　　zoom:1;

　　　　}

 提示：在上述的内容中，有些兼容的部分没有一一列出。

CSS之垂直居中、比border更细的线、浮动清除

标签：strong   top   平移   -o   hid   nsf   class   垂直居中   方式   

原文地址：http://www.cnblogs.com/feiyuO/p/7691895.html