六、任务四——定位和居中问题

时间 2019-11-29

原文原文链接

要实现如图中所示的效果：wordpress

<style>
.cicle{
    width:50px;
    height:50px;
    background-color: #fc0;
}
.one{
    -moz-border-radius:0  0 100% 0;  
    -webkit-border-radius:0  0 100% 0;  
    border-radius:0  0 100% 0;   
}
.two{
    -moz-border-radius:50px 0 0 0;  
    -webkit-border-radius:50px 0 0 0;  
    border-radius:50px 0 0 0; 
}
</style>
<body>
    <div class="container">
        <div class="cicle left"></div>
        <div class="cicle right"</div>
    </div>
</body>

关于四分之一圆的实现问题请看CSS3 border-radius 属性以及border-radius测试，先看使两个四分之一圆位于矩形的左上角和右下角有两种定位方法：布局

（1）绝对定位：post

矩形和扇形都设置position：absolute，相对于矩形定位，两个扇形脱离普通流，重叠于左上角，如图：测试

　　左上角的不用移动，右下角的相对于矩形定位，right、bottom均为0便可。flex

（2）相对定位：flexbox

两个扇形设置position：relative，相对定位的元素不会脱离普通流，left、top等属性也是相对于元素在普通流中的位置进行定位，未定位的扇形位置如图所示：

　　　因此右下角的扇形的属性为“left：350px；top：100px；”

接下来要实现灰色矩形水平垂直居中，我首先想到的就是利用绝对定位，后来看了其余人的答案，发现了其余几种方法(包括但不限于任务四的解决方法，主要是元素的水平垂直居中问题），现总结以下：

1、position方式：

主要就是矩形设置绝对定位，相对于body对象定位，但水平垂直居中效果的实现又有几个不一样的方法：

（1）负外边距方式（宽高固定）：

.container{

    background-color: #ccc;

    position:absolute;

    height:200px; width:400px;

    left:50%; top:50%;

    margin:-100px 0 0 -200px;     /*负外边距分别为宽高的一半*/

}

矩形设置position：absolute，矩形相对于body对象进行绝对定位，设置left和top属性均为50%，同时设置margin-left和margin-top分别为矩形宽度、高度的一半，这样就能够实现矩形水平垂直居中了。

　　　　这个方法须要提早知道元素的尺寸，不然margin负值的调整没法精确。

（2）margin：auto方式（宽高固定）：

.container {

    width: 400px; height: 200px;

    position: absolute;

     left: 0; top: 0; right: 0; bottom: 0;

    margin: auto;  

}

这种方法也能够实现水平垂直居中，简单来讲就是：在普通流（normal flow）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。 position：absolute；使container跳出了普通流，为container设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器从新分配一个边界框，可是此时该块区域将填充其父元素的全部可用空间（父元素通常为body或者声明为position:relative;的容器），因此给内容块设置一个高度height或宽度width，可以防止内容块占据全部的可用空间，促使浏览器根据新的边界框从新计算margin:auto。

总而言之：绝对定位元素不在普通内容流中渲染，所以margin:auto可使内容在经过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

（3）transform方式（宽高无限制）：

.container {

    width: 400px; height: 200px;

    position: absolute;

     left: 50%; top: 50%;

    transform: translate(-50%, -50%);

}

　　 CSS3中transform属性的translate值表示的是相对于自身大小的偏移量，因此不管绝对定位元素的尺寸是多少，这种方法的显示效果都是水平垂直居中的（若是不设置宽高，container会被内容撑开居中显示，若是没有内容，container不显示）。当要求矩形高度是根据内容动态变化的时候能够用这种方式，可是兼容性很差。

（4）left/right/top/bottom均为25%（宽高不固定）：

.container{
    position: absolute;
    top:25%;
    bottom:25%;
    right:25%;
    left:25%;
}

　　这种方法矩形尺寸会随着浏览器窗口变化而变化，但始终是水平垂直居中的。

2、display：table方式：

<style> 
html,body{
    height:100%;
    width:100%;
}
.parent{
     display:table;
     height:100%;
     width:100%;
}
.inner{
    display:table-cell;  
    vertical-align: middle;
}
.container{
    background-color: #ccc;
    width:400px; height:200px;
    margin:0 auto;
}
</style>
<div class="parent">
     <div class="inner">
            <div class="container">
                  <div class="cicle one"></div>
                  <div class="cicle two"></div>
            </div>
   </div>
</div>

display属性定义创建布局时元素生成的显示框类型。display：table表示parent元素会做为块级表格来显示，display：table-cell表示inner元素会做为一个表格单元格显示，而vertical-align：middle使得表单元格中的内容垂直居中显示，container再设置margin：0 auto；就达到了水平垂直居中要求。

那么为何html/body/parent都设置width：100%；height：100%；呢？

由于矩形要求是相对于整个浏览器窗口垂直居中，因此parent尺寸设置为width：100%；height：100%；就能够了，可是《css权威指南》指出height/width百分数是相对于包含块的，parent的height/width相对于body，但因为body没有设置height/width，《css权威指南》又指出，若是没有显示声明包含块的height/width，百分数高度会重置为auto，因此上面parent的width/height设置为任何值都跟没设置同样，也就是要设置parent为宽高100%，必须设置其上一级div也就是body的宽度或高度，不然无效。同理因为body宽高设置的是100%，若是没有显式设置html，body仍是至关于没设置。又由于html尺寸由浏览器窗口控制，因此html，body，div都要设置height/width为100%。

总之：要设置div100%显示，必须设置其上一级div的宽度或高度，不然无效。

3、flex方式：

html,body,.parent{
    width:100%;
    height:100%;
 }
.inner{
    display: -moz-box;                      /* Firefox */
    display: -ms-flexbox;                   /* IE10 */
    display: -webkit-box;                   /* Safari */ 
    display: -webkit-flex;                  /* Chrome, WebKit */
    display: box; 
    display: flexbox; 
    display: flex;  
    width: 100%;  height: 100%;
    justify-content: center;        
    align-items: center;
}
.container{
    position: relative;
    width:400px;
    height:200px;
    background-color: #ccc;
}

　　Justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式。center表示弹性盒子元素将向行中间位置对齐，该行的子元素将相互对齐并在行中居中对齐；

align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。center表示弹性盒子元素在该行的侧轴（纵轴）上居中放置。

总结：